理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道。angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性。angularjs中与DI相关有angular.module()、angular.injector()、 $injector$provide。对于一个DI容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository、@Service、@Controller、@Component实现的;对象的获取可以ApplicationContext.getBean()实现;依赖关系的声明,即可以在xml文件中配置,也可以使用@Resource等注解在java代码中声明。在angular中,module和$provide相当于是服务的注册;injector用来获取对象(angular会自动完成依赖的注入);依赖关系的声明在angular中有3种方式。下面从这3个方面,介绍下angular的DI。

1、angular.module()创建、获取、注册angular中的模块

  The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved。(angular.module()是一个用于创建、注册和检索模块的全局位置。当传递两个或多个参数时,会创建一个新的模块。如果只传递一个参数,则检索现有的模块(作为第一个参数传递给模块的名称)。)

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module("myModule", []);

// 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module("myModule");

// true,都是同一个模块
alert(createModule == getModule);

  该函数既可以创建新的模块,也可以获取已有模块,是创建还是获取,通过参数的个数来区分。

  angular.module(name, [requires], [configFn]);

    name:字符串类型,代表模块的名称;

    requires:字符串的数组,代表该模块依赖的其他模块列表,如果不依赖其他模块,用空数组即可;

    configFn:用来对该模块进行一些配置。

  现在我们知道如何创建、获取模块了,那么模块究竟是什么呢?官方的Developer Guide上只有一句话:You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.(你可以把模块看作是应用程序的不同部分的容器——控制器、服务、过滤器、指令)

2、$provide和模块的关系

  The $provide service has a number of methods for registering components with the $injector. Many of these functions are also exposed on angular.Module.

  之前提到过:module和provide是用来注册服务到injector中的。查看官方的API,可以看到$provide提供了provide()、constant()、value()、factory()、service()来创建各种不同性质的服务;angular.Module中也提供了这5个服务注册方法。其实2者功能是完全一样的,就是用来向DI容器注册服务到injector中。

  官方API下的auto有$provide 和 $injector,Implicit module which gets automatically added to each $injector.按照字面意思是说,每一个injector都有这2个隐含的服务。但1.2.25版本中,感觉没有办法获取injector中的$provide。不知道这是为什么?一般来说也不需要显示使用这个服务,直接使用module中提供的API即可。

var injector = angular.injector();
alert(injector.has("$provide"));//false
alert(injector.has("$injector"));//true

3、angular.injector()

  使用angular.injector();也能获取到注入器,但是没有和模块绑定。这种做法是没有意义的,相当于是你创建了一个空的DI容器,里面都没有服务别人怎么用呢。正确的做法是,在创建注入器的时候,指定需要加载的模块。

// 创建myModule模块、注册服务
var myModule = angular.module(‘myModule‘, []);
myModule.service(‘myService‘, function() {
            this.my = 0;
});

// 创建herModule模块、注册服务
var herModule = angular.module(‘herModule‘, []);
herModule.service(‘herService‘, function() {
            this.her = 1;
});

// 加载了2个模块中的服务
var injector = angular.injector(["myModule","herModule"]);
alert(injector.get("myService").my);
alert(injector.get("herService").her);

  如果加载了多个模块,那么通过返回的injector可以获取到多个模块下的服务。这个例子中如果只加载了myMoudle,那么得到的injector就不能访问herMoudle下的服务。这里特别需要注意下:angular.injector()可以调用多次,每次都返回新建的injector对象

var injector1 = angular.injector(["myModule","herModule"]);
var injector2 = angular.injector(["myModule","herModule"]);

alert(injector1 == injector2);//false

4、angular中三种声明依赖的方式

  angular提供了3种获取依赖的方式:inference、annotation、inline方式。

// 创建myModule模块、注册服务
var myModule = angular.module(‘myModule‘, []);
myModule.service(‘myService‘, function() {
            this.my = 0;
});

// 获取injector
var injector = angular.injector(["myModule"]);

// 第一种inference
injector.invoke(function(myService){alert(myService.my);});

// 第二种annotation
function explicit(serviceA) {alert(serviceA.my);};
explicit.$inject = [‘myService‘];
injector.invoke(explicit);

// 第三种inline
injector.invoke([‘myService‘, function(serviceA){alert(serviceA.my);}]);

  其中annotation和inline方式,对于函数参数名称没有要求,是推荐的做法;inference方式强制要求参数名称和服务名称一致,如果JS代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。

时间: 2024-10-06 01:10:38

理解angular中的module和injector,即依赖注入的相关文章

(七)理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

6.在MVC中使用泛型仓储模式和依赖注入实现增删查改

原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pattern-and-dep/ 系列目录: Relationship in Entity Framework Using Code First Approach With Fluent API[[使用EF Code-First方式和Fluent API来探讨EF中的关系]] Code First Mig

spring的依赖注入【NC产品中也用到spring的依赖注入】

下面设计到的类有EditPsndocAction跟RefreshPsndocAction这个两个类, 而我想要的最终效果是: 下面解释一下流程“ 如下图所示:因为NC产品中使用了spring的的依赖注入.所以我这里可以这样子调用.直接调用定刷新按钮的bean . 在EditPsndocAction这个类中,用spring的依赖注入的一个方式.给对象赋值 注意一点就是:RefreshPsndocAction 是刷新按钮对应的ben的名称.也就是 最后在EdictPsndocAction这个类的do

ASP.NET Core中使用GraphQL - 第三章 依赖注入

ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间件 SOLID原则中的D表示依赖倒置原则.这个原则的内容是: 上层模块不应该直接依赖底层模块,而应该依赖其抽象 抽象不应该依赖于细节, 细节应该依赖抽象 来源:WIKIPEDIA 在一个模块中创建一个其他模块的实例会导致这个模块与其他模块之间的紧耦合. 为了让不同的模块解耦,我们需要遵循依赖倒置原则.按照这种

spring中的控制反转IoC和依赖注入DI

原文:http://blog.163.com/[email protected]/blog/static/50639037200721345218382/ IoC(Inversion of Control),这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关 系.这是什么意思呢,举个简单的例子,我们是如何找女朋友的?常见的情况是,我们到处去看哪里有长得漂亮身材又好的mm,然后打听她们的兴趣爱好.qq 号.电话号.手机号.

深入理解Angular中的$apply()以及$digest()

reference:http://blog.csdn.net/dm_vincent/article/details/38705099 $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑.而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的.这篇文章旨在解释$apply()和$digest()是什么,以及在日常的编码中如何应用它们. 探索$apply()和$digest() AngularJS提供了一个

理解Angular中的$apply()以及$digest()

$apply()和$digest()在AngularJS中是两个核心概念.可是有时候它们又让人困惑. 而为了了解AngularJS的工作方式,首先须要了解$apply()和$digest()是怎样工作的.这篇文章旨在解释$apply()和$digest()是什么,以及在日常的编码中怎样应用它们. 探索$apply()和$digest() AngularJS提供了一个很酷的特性叫做双向数据绑定(Two-way Data Binding).这个特性大大简化了我们的代码编写方式.数据绑定意味着当Vie

[email&#160;protected]理解Angular中的$apply()以及$digest()

$apply() 和 $digest() 在 AngularJS 中是两个核心概念,但是有时候它们又让人困惑.而为了了解 AngularJS 的工作方式,首先需要了解 $apply() 和 $digest() 是如何工作的.这篇文章旨在解释 $apply() 和 $digest() 是什么,以及在日常的编码中如何应用它们. 探索 $apply() 和 $digest() AngularJS 提供了一个非常酷的特性叫做双向数据绑定 (Two-way Data Binding) ,这个特性大大简化了

转: 理解AngularJS中的依赖注入

理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Provider服务($provide) $provide服务负责告诉Angular如何创造一个新的可注入的东西:即服务(service).服务会被叫做provider的东西来定 义,你可以使用$provide来创建一个provider.你需要使用$provide中的provider方法来定义一个provi