Question

您有2个角度模块，其中一个模块具有您要在另一个模块中使用的服务：

var moduleA = angular.module ('moduleA', [])
                 .service('FirstService', function(){
                    var thing = {};
                    thing.data = ['1', 'alskdjf' , 0];
                    return thing;
                 });

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

问题是 - 你如何在moduleB中使用'FirstService'？

这失败了：

moduleB.controller('MBC', ['$scope', 'moduleA', function($scope, moduleA){}])

这些也失败了：

moduleB.controller('MBC', ['$scope', function($scope){
  var a = angular.injector().get('FirstService');
  var b = angular.injector().invoke('FirstService');
  var c = moduleA.service('FirstService');
  var d = moduleA.FirstService;

}])

Answer 1

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

这会将模块注入模块，然后您可以使用moduleS服务。

Answer 2

这是使用角度服务的简单示例。

mainApp.service('CalcService', function(MathService){
    this.square = function(a) {
        return MathService.multiply(a,a);
    }
});
mainApp.controller('CalcController', function($scope, CalcService) {
    $scope.square = function() {
       $scope.result = CalcService.square($scope.number);
    }
});

Answer 3

我在Plunkr写了一个有效的答案。简而言之，您将第二个模块作为依赖项添加到第一个模块中。

从那里你可以注入附加到第二个模块的任何服务。

您根本不需要使用.injector（）函数。（这不是推荐的方式）。

转到此链接：http://plnkr.co/edit/7Q6dvtpvFJforeJhTLCR?p=info

var app = angular.module('plunker', ['separateModule']);

app.controller('MainCtrl', function($scope, TestService) {
  $scope.title = 'Plunker Example for Stack Overflow';
  $scope.message = TestService.sayHi();
});

//Second module
var anotherModule = angular.module('separateModule', []);

//Let's declare of Service in the Second module
anotherModule.service('TestService', function() {
    this.message = 'Hello Stack Overflow';
    
    this.sayHi = function() {
      return this.message;
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>{{ title }}</h1>
    <p>
      {{ message }}
    </p>
  </body>

</html>

从单独的角度模块获得服务

3 个答案: