AngularJs：从app.config

Question

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

在搜索时，我发现this question有一个我试图遵循的解决方案（不是接受的答案，但下面的解决方案标题为“将您的服务设置为自定义AngularJS Provider < /强>“）

然而，当我尝试从我的app.config中调用服务时，该解决方案和建议的替代方案也会遇到问题（该服务似乎根本没有被调用）。我是角度和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和controller，所以我想我错过了一些依赖项，或者我没有正确地调用服务。

有什么想法吗？

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服务是由服务工厂创建的单例对象。   这些服务工厂是由a创建的功能   服务提供者。服务提供者是构造函数。   实例化时，它们必须包含一个名为$ get的属性   拥有服务工厂的功能。

您无法在config（constant除外），只有服务提供商注入服务，而您的RoutingService不适用于此。

从技术上讲，您可以通过

获得服务

RoutingServiceProvider.$get();

但它会创建一个单独的实例（而不是单例对象），$routeParams的使用在config中被调用时没有任何意义。

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