当前位置: 首页 > 面试题库 >

在Angularjs中的模块的“运行”方法中注入依赖项

廖招
2023-03-14
问题内容

我试图了解如何使用Angularjs。看起来不错的框架,但是我在DI方面遇到了一些问题…

如何在模块的“运行”方法中注入依赖项?我的意思是我能够做到,但是仅当我具有与“运行”参数名称相同名称的服务/工厂/值时,它才有效。我构建了一个简单的应用程序来说明我的意思:

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 }; });

您可能会问我为什么需要它:)但是,在我看来,首先要有有意义的名称空间来组织代码。它还将最小化名称冲突,最后,当最小化JS时,由于将其重命名为更短的名称,因此情况会恶化。


问题答案:

我认为原因

App.$inject = [CONFIGURATION, LOG_SERVICE];

之所以不起作用,是因为您还有其他2个参数$rootScope$location并且需要在中插入$inject。因此它必须是:

App.$inject = ["$rootScope", "$location", CONFIGURATION, LOG_SERVICE];

注入服务的另一种方法是使用此版本:

app.run(["$rootScope", "$location", CONFIGURATION, LOG_SERVICE, 
         function ($rootScope, $location, Configuration, LogService) {

}] );


 类似资料:
  • 问题内容: 当前在app.js中,我有以下路线: 如您所见,我正在尝试注入Path依赖项。尽管我收到一条错误消息,说找不到该提供程序。我认为这是因为配置模块提供程序首先执行。以下是“ services.js”中我的路径提供程序定义 我怎样才能将此提供程序注入配置模块? 问题答案: 在中,只能使用提供程序(例如)。在你只能使用服务(如实例)。您有一家工厂,而不是供应商。请参阅具有以下三种创建方式的代

  • 问题内容: 在我的NestJS应用程序中- 我有TypeScript类,这些类中已经注入了其他类和值。唯一的是,我要导入带有语句的TypeScript类,并使用DI系统注入它们。有什么方法可以删除导入语句并让DI系统处理它? 问题答案: TL; DR ->类参考 DI->类实例化 可以通过字符串标记进行匹配,但最好使用类引用。 封装形式 依赖项注入系统主要处理类的实例化。这很好,因为您不必关心要注

  • 主要内容:什么是依赖注入,value,factory,provider,constant,实例,AngularJS 实例 - factory,AngularJS 实例 - provider什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦

  • 问题内容: 我想知道接下来的两行之间是否有区别,为什么要使用其中之一(这两行按预期工作) 我是从AngularJS官方教程中获得的,我知道有关于此修改的解释,但我不理解它…… http://docs.angularjs.org/tutorial/step_05 提前致谢! 问题答案: 如果缩小第一行,则会得到: 依赖注入将无法再工作,因为角度不知道什么和有。比较一下以缩小第二个版本: 该函数的参数

  • 本文向大家介绍详解AngularJS中的依赖注入机制,包括了详解AngularJS中的依赖注入机制的使用技巧和注意事项,需要的朋友参考一下  依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式。这减轻一个组成部分,从定位的依赖,依赖配置。这有助于使组件可重用,维护和测试。 AngularJS提供了一个至高无上的依赖注入机制。它提供了一个可注入彼此依赖下列核心组件。   

  • 让我们创建一个名为的新模块,并在那里定义CounterService。 app/shared/shared.module.ts 现在我们将引入 SharedModule 到AppModule 和中。 app/lazy/lazy.module.ts 使用此配置,两个模块的组件都可以访问CounterService。 我们将以完全相同的方式在EagerComponent和LazyComponent中使