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

IT技术 javascript angularjs
2021-03-02 18:38:14

目前在 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 依赖项。虽然我收到一个错误，说它找不到这个提供者。我认为这是因为配置module提供程序在执行其他任何操作之前首先执行。下面是我在“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; 
    }
  }
});

如何将此提供程序注入配置module？

4个回答
  1. angular.config 只接受提供者
  2. 每个服务、工厂等都是 Provider 的实例

因此，要在配置中注入服务，您只需要通过在其名称中添加“Provider”来调用服务的 Provider。

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

根据 angularjs Provider文档

...如果你定义一个工厂配方，一个空的 Provider 类型，其$get方法设置为你的工厂函数，在引擎盖下自动创建。

因此，如果您有工厂（或服务），例如：

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

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

.config(function(myConfigProvider){
   myConfigProvider
     .$get()
     .hello('world');
});
我可能是错的，但我想.$get()手动调用是错误的，因为服务不再是单身人士。
2021-04-20 18:38:14
@SmartyTwiti 是的，可以将您的服务/工厂的提供者注入配置块。这是一个可以运行的 jsfiddle 来演示：jsfiddle.net/vefatkwL
2021-04-26 18:38:14
您的回答是错误的，请参阅stackoverflow.com/a/24714452/1154692 “您只能将提供者（而非实例）注入配置块”
2021-05-03 18:38:14
我有一个工厂，我已经这样做了，但没有一种方法可用。有任何想法吗？
2021-05-04 18:38:14
我更新了答案以举例说明如何访问您的工厂方法。我希望它有帮助。
2021-05-11 18:38:14

在.config您只能使用提供程序（例如$routeProvider）。在.run您只能使用服务实例（例如$route）。你有一个工厂，而不是一个供应商。使用三种创建方式查看此代码段：Service、Factory 和 Provider 他们还在 angular 文档https://docs.angularjs.org/guide/services 中提到了这一点

嗨@sumeet 你能详细说明一下吗？如果您定义了服务名称，angular 会将 Provider 附加到您的服务名称。这自侏罗纪以来就发生了。另一个答案基本上是在配置部分使用服务的提供者。
2021-05-05 18:38:14
@sumeet 所说的是您可以在配置中注入工厂，但将它与yourFactoryProvider.$get().yourFunction().
2021-05-11 18:38:14
这个答案“现在”不是错误的，因为可以通过附加“提供者”（根据另一个答案）在配置中注入工厂
2021-05-13 18:38:14
这个答案给出了解释，Tongamite给出了一个解决方案。
2021-05-16 18:38:14

您应该为此使用常量，因为它是您可以在配置阶段中注入的唯一内容，而不是提供程序。

angular.module("yourModule").constant("paths", {
  base: function(){ ... }
});
2021-05-12 18:38:14
是的，谢谢！尽管我已经创建了一个提供程序，因为 Eduard 提供了非常好的资源来最终开始了解 AngularJS 架构。
2021-05-15 18:38:14
啊完美！那么常量有可能具有函数吗？我以为他们只能返回字符串..？
2021-05-17 18:38:14

当我试图弄清楚同样的事情时，这个讨论帮助了我，基本上

$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;
                    }]
                }
            })
其它你可能感兴趣的问题
上一篇如何在 vanilla javascript 中向现有选择动态添加选项 下一篇chrome.storage.local.get 并设置