Как создать завод в угловой существующей службе

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

По какой-то причине вы скрипку жалуются, что он не может создать экземпляр модуля 'приложение', так что все выходит из строя.

В любом случае, вот скрипка к рабочему примеру: 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); 
    } 
});