在config()模块中注入依赖项 - AngularJS

时间:2013-07-05 09:48:50

标签: javascript angularjs

目前在app.js我有以下路线:

var gm = angular.module('gm', ['gm.services','gm.directives','gm.filters','gm.controllers','ngSanitize']);

gm.config(['$routeProvider', 'Path', function($routeProvider, Path) {

    $routeProvider.when('/login', { 
        templateUrl: Path.view('application/authentication/login.html'), 
        controller: 'authController' 
    });

    $routeProvider.when('/dashboard', { 
        templateUrl: Path.view('application/dashboard/index.html'), 
        controller: 'dashboardController' 
    }); 

    $routeProvider.otherwise({ 
        redirectTo: '/login'
    });

}]);

我正在尝试注入Path依赖项,如您所见。虽然我收到一个错误,说它找不到这个提供商。我认为这是因为配置模块提供程序首先执行。下面是我在“services.js”中的路径提供程序定义

gm.factory("Path", function() {
  return {
    view: function(path) {
      return 'app/views/' + path; 
    },
    css: function(path) {
      return 'app/views/' + path; 
    },
    font: function(path) {
      return 'app/views/' + path; 
    },
    img: function(path) {
      return 'app/views/' + path; 
    },
    js: function(path) {
      return 'app/views/' + path; 
    },
    vendor: function(path) {
      return 'app/views/' + path; 
    },
    base: function(path) {
      return '/' + path; 
    }
  }
}); 

如何将此提供程序注入配置模块?

4 个答案:

答案 0 :(得分:77)

  1. angular.config仅接受提供商
  2. 每个服务,工厂等都是提供商
  3. 的实例

    因此,要在配置中注入服务,您只需要通过添加'提供商来调用服务提供商。它的名字。

    angular.module('myApp')
      .service('FooService', function(){
        //...etc
      })
      .config(function(FooServiceProvider){
        //...etc
      });
    

    根据angularjs Provider documentation

      

    ...如果您定义了Factory配方,则会自动创建一个空的Provider类型,其中$get方法设置为您的工厂函数。

    因此,如果您有工厂(或服务),例如:

    .factory('myConfig', function(){
      return {
        hello: function(msg){
          console.log('hello ' + msg)
        }
      }
    })
    

    首先需要在访问返回的对象之前使用$get方法调用工厂:

    .config(function(myConfigProvider){
       myConfigProvider
         .$get()
         .hello('world');
    });
    

答案 1 :(得分:56)

.config中,您只能使用提供者(例如$routeProvider)。在.run中,您只能使用服务实例(例如$route)。你有工厂,而不是供应商。 See this snippet with the three ways of creating this: Service, Factory and Provider 他们还在角度文档https://docs.angularjs.org/guide/services

中提到了这一点

答案 2 :(得分:14)

你应该使用常量,因为除了提供者之外,你可以在配置阶段注入唯一的东西。

angular.module("yourModule").constant("paths", {
  base: function(){ ... }
});

答案 3 :(得分:2)

当我试图弄清楚同样的事情时,这discussion对我有所帮助,基本上是

$routeProvider.when('/', {
                templateUrl:'views/main.html',
                controller:'MainController',
                resolve: {
                    recentPosts: ['$q', 'backendService', function($q, backendService){
                        var deferred = $q.defer();
                        backendService.getRecentPosts().then(
                            function(data) {
                                var result = data.result;
                                deferred.resolve(result);
                            },
                            function(error) {
                                deferred.reject(error);
                            }
                        );
                        return deferred.promise;
                    }]
                }
            })