我试图了解如何使用Angularjs。它看起来很漂亮的框架,但我坚持DI的一个小问题...
如何在模块的“run”方法中注入dependecies?我的意思是我能够做到这一点,但只有当我的服务/工厂/值与“运行”参数名称同名时才有效。 我构建一个简单的应用程序来说明我的意思:
var CONFIGURATION = "Configuration"; //I would like to have App.Configuration
var LOG_SERVICE = "LogService"; //I would like to have App.Services.LogService
var LOGIN_CONTROLLER = "LoginController";
var App = {};
App.Services = {};
App.Controllers = {};
App = angular.extend(App, angular.module("App", [])
.run(function ($rootScope, $location, Configuration, LogService) {
//How to force LogService to be the logger in params?
//not var = logger = LogService :)
LogService.log("app run");
}));
//App.$inject = [CONFIGURATION, LOG_SERVICE]; /* NOT WORKS */
App.Services.LogService = function (config) {
this.log = function (message) {
config.hasConsole ? console.log(message) : alert(message);
};
};
App.Services.LogService.$inject = [CONFIGURATION];
App.service(LOG_SERVICE, App.Services.LogService);
App.Controllers.LoginController = function (config, logger) {
logger.log("Controller constructed");
}
//The line below, required only because of problem described
App.Controllers.LoginController.$inject = [CONFIGURATION, LOG_SERVICE];
App.factory(CONFIGURATION, function () { return { hasConsole: console && console.log }; });
为什么我需要它可能你会问:)但在我看来,首先要有一个有意义的命名空间来组织代码。它还可以最大限度地减少名称冲突,最后,当minifing JS时,事情就会崩溃,因为它重命名为更短的名字。
答案 0 :(得分:85)
我认为原因
App.$inject = [CONFIGURATION, LOG_SERVICE];
不起作用,是因为您还有其他两个参数$rootScope
&您需要在$location
中注入$inject
。所以需要:
App.$inject = ["$rootScope", "$location", CONFIGURATION, LOG_SERVICE];
您可以注入服务的另一种方法是使用此版本:
app.run(["$rootScope", "$location", CONFIGURATION, LOG_SERVICE,
function ($rootScope, $location, Configuration, LogService) {
}] );