从单独的角度模块获取服务答案

【问题标题】：Get service from separate angular module从单独的角度模块获取服务
【发布时间】：2015-04-13 04:29:42
【问题描述】：

您有 2 个 Angular 模块，其中一个模块具有您想在另一个模块中使用的服务：

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

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

问题是 - 您如何在模块 B 中使用“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;

}])

【问题讨论】：

我认为您需要像这样将模块 A 注入模块 B var moduleB = angular.module('moduleB', ['moduleA]);
是的。我知道这很容易。如果您将其创建为答案，您将获得代表
我已经回答过了。如果对你有帮助，你可以接受我的回答

标签： angularjs angularjs-module

【解决方案1】：

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

这会将 moduleA 注入到 moduleB 中，然后您就可以使用 moduleA 服务了。

【讨论】：

【解决方案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);
    }
});

【讨论】：

这并不能解决问题……甚至不能真正解决问题。您正在注入 MathService，但没有显示它注册到的位置/应用程序，并且还依赖于隐式注入而不是显式注入......这意味着您没有使用容易出错且更难调试的数组或 $injector 语法。跨度>

【解决方案3】：

我在 Plunkr 中写了一个有效的答案。长话短说，您将 second 模块作为依赖项添加到第一个模块中。

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

您根本不需要使用 .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>

【讨论】：

@andrew-luring 这有帮助吗？