javascript - 如何以现有服务的 Angular 创建工厂

Question

我正在学习 angularjs 并阅读有关服务和工厂的文章。此 ARTICLE 提供了一个示例这是Service Fiddle吗.

在阅读本文时，我正在尝试将服务转换为工厂，这是指向 My Factory Fiddle 的链接.但它仍然没有按预期工作我不确定我做错了什么。

HTML

  <div ng-app="app">
      <div ng-controller="CalculatorController">
          Enter a number:
          <input type="number" ng-model="number" />
          <button ng-click="doSquare()">X<sup>2</sup></button>
          <button ng-click="doCube()">X<sup>3</sup></button>

          <div>Answer: {{answer}}</div>
      </div>
  </div>

JS

    var app = angular.module('app', []);

    app.factory('MathService', function() {
    var myFactory = {};
        myFactory.add = function(a, b) { return a + b };

        myFactory.subtract = function(a, b) { return a - b };

        myFactory.multiply = function(a, b) { return a * b };

        myFactory.divide = function(a, b) { return a / b };

        retutn myFactory;
    });

    app.factory('CalculatorService', function(MathService){
        var calcFactory = {};
        calcFactory.square = function(a) { return MathService.multiply(a,a); };
        calcFactory.cube = function(a) { return MathService.myFactory.multiply(a, MathService.myFactory.multiply(a,a)); };

        return calcFactory;

    });

    app.controller('CalculatorController', function($scope, CalculatorService) {

        $scope.doSquare = function() {
            $scope.answer = CalculatorService.calcFactory.square($scope.number);
        }

        $scope.doCube = function() {
            $scope.answer = CalculatorService.calcFactory.cube($scope.number);
        }
    });

Answer 1

出于某种原因，你提示它无法实例化“app”模块，所以一切都失败了。

无论如何，这是一个工作示例的 fiddle :https://jsfiddle.net/gom2q6bz/1/ .

请注意，您不需要调用 CalculatorService.calcFactory.cube 而是调用 CalculatorService.cube;

var app = angular.module('app', []);

app.factory('MathService', function() {
  var service = {};
  service.add = function(a, b) {
    return a + b
  };

  service.subtract = function(a, b) {
    return a - b
  };

  service.multiply = function(a, b) {
    return a * b
  };

  service.divide = function(a, b) {
    return a / b
  };

  return service;
});

app.factory('CalculatorService', function(MathService) {
  var service = {};
  service.square = function(a) {
    return MathService.multiply(a, a);
  };
  service.cube = function(a) {
    return MathService.multiply(a, MathService.multiply(a, a));
  };

  return service;

});

app.controller('CalculatorController', function($scope, CalculatorService) {

  $scope.doSquare = function() {
    $scope.answer = CalculatorService.square($scope.number);
  }

  $scope.doCube = function() {
    $scope.answer = CalculatorService.cube($scope.number);
  }
});