AngularJs：从 app.config 调用服务/提供者

Question

我想从 app.config 中调用我的服务。

在搜索此内容时，我发现 this question 带有我尝试遵循的解决方案（不是已接受的答案，但下面的解决方案标题为“将您的服务设置为自定义 AngularJS 提供程序")

但是，使用该解决方案以及建议的替代方案时，当我尝试从 app.config 中调用服务时遇到问题（似乎根本没有调用该服务）。我是 angular 和 javascript 的新手，并不知道如何正确调试（我正在使用 firebug）。我希望你能帮助我一些指示和可能的解决方案。

当前代码（尝试从链接的问题中实现“可能的替代方案”：

angular.module('myApp', [
  'ngRoute',
])
.config(['$routeProvider', '$locationProvider', '$provide', function($routeProvider, $locationProvider, $provide) {

$provide.service('RoutingService',function($routeParams){
    var name = $routeParams.name;
    if (name == '') {name = 'testfile'}

    var routeDef = {};
    routeDef.templateUrl = 'pages/' + name + '/' + name + '.html';
    routeDef.controller = name + 'Ctrl';
    return routeDef;
})

//Here i would like to get a hold of the returned routeDef object defined above.
$routeProvider.when('/name:', {
                        templateUrl: RoutingService.templateUrl, 
                        controller: RoutingService.controller
                    });

我之前的尝试是通过提供者这样声明服务：

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

ServiceModule.provider('routingService', function routingServiceProvider(){
      this.$get = [function RoutingServiceFactory(){

         return new RoutingService(); 
      }]
});

function RoutingService(){
    this.getUrlAndControllerFromRouteParams = function($routeParams){
        var name = $routeParams.name;

        var routeDef = {};
        routeDef.templateUrl = 'pages/' + name + '/' + name + '.html';
        routeDef.controller = name + 'Ctrl';
        return routeDef;
    }
}

并尝试像我通常在控制器中调用服务一样调用它（当然，在将RoutingServiceModel 添加到myApp 的依赖项之后）。在这两种情况下，当我导航到我的视图时，templateUrl 和控制器都没有设置，所以我想我缺少一些依赖项，或者没有正确调用服务。

有什么想法吗？

Answer 1

在配置阶段，只能注入提供程序（使用 AUTO 模块中的服务除外--$provide 和 $injector)。

请查看此工作演示：http://jsfiddle.net/nxbL66p2/

angular.module('Joy',[])
.config(function($provide) {
  $provide.provider('greeting', function() {
    this.$get = function() {
      return function(name) {
        alert("Hello, " + name);
      };
    };
  });
})
.controller('MyCtrl', ['$scope', 'greeting', function ($scope, greeting) {
    $scope.greet = function () {
        greeting('Joy');
    };
}]);

简单的 HTML：

<div ng-app="Joy">
    <div ng-controller="MyCtrl">
        <div ng-click="greet()">Click to greet.</div>
    </div>
</div>

参考：https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Answer 2

Angular 的术语有点混乱，因为“服务”和“提供者”可能会根据上下文指定不同的东西。根据in the manual的说法，

Angular 服务是由服务工厂创建的单例对象。 这些服务工厂是函数，而这些函数又是由 服务提供者。服务提供者是构造函数。 实例化时，它们必须包含一个名为 $get 的属性，它 持有服务工厂函数。

你不能在config中注入服务（constant除外），只能是服务提供者，你的RoutingService在那里不适用。

从技术上讲，您可以在那里获得服务

RoutingServiceProvider.$get();

但它会创建一个单独的实例（而不是单例对象），并且在 config 中调用它时，$routeParams 的使用毫无意义。

您可以将templateUrl 用作函数（请参阅the manual），而动态控制器名称不适合路由配置，请使用ng-controller 在模板中定义它们。