Angular 理解module和injector,即依赖注入  更新时间:2016年09月07日 10:00:59   投稿:lqh   本文主要介绍Angular 理解module和injector的知识,这里整理了相关知识,并详细介绍了依赖注入的问题,有兴趣的小伙伴可以参考下 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道。angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性。angularjs中与DI相关有angular.module()、angular.injector()、 $injector、$provide。对于一个DI容器来说,必须具备3个要素:服务的注册、依赖关系的声明、对象的获取。比如spring中,服务的注册是通过xml配置文件的标签或是注解@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。 // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 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代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。 以上就是对Angular JS依赖注入的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJS $injector 依赖注入详解 AngularJs动态加载模块和依赖注入详解 详解AngularJS中的依赖注入机制 详解Angularjs中的依赖注入 AngularJS学习笔记之依赖注入详解 AngularJS 依赖注入详解及示例代码 AngularJs 动态加载模块和依赖 AngularJS之依赖注入模拟实现 AngularJS 依赖注入详解和简单实例 Angular.JS学习之依赖注入$injector详析 Angular module injector 相关文章 利用require.js与angular搭建spa应用的方法实例 这篇文章主要给大家介绍了关于利用require.js与angular搭建spa应用的方法实例,文中通过示例代码给大家介绍的非常详细,对大家的理解和学习具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-07-07 AngularJS入门教程之模块化操作用法示例 这篇文章主要介绍了AngularJS模块化操作用法,结合实例形式分析了AngularJS基于模块化操作避免命名冲突的相关操作技巧,需要的朋友可以参考下 2016-11-11 利用Jasmine对Angular进行单元测试的方法详解 单元测试是一种能够帮助开发者验证代码中某一部分有效性的技术。下面这篇文章主要给大家介绍了关于利用Jasmine对Angular进行单元测试的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-06-06 Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证) AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确。现在小编给大家整理了两种方法,需要的的朋友参考下吧 2017-05-05 AngularJs ng-repeat 嵌套如何获取外层$index 这篇文章主要介绍了AngularJs ng-repeat 嵌套如何获取外层$index的相关资料,需要的朋友可以参考下 2016-09-09 AngularJs自定义服务之实现签名和加密 AngularJS 是一个 JavaScript 框架,它可以通过 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下 2016-08-08 Angular客户端请求Rest服务跨域问题的解决方法 本篇文章主要介绍了Angular客户端请求Rest服务跨域问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 理解Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。这篇文章主要带着大家理解Angular数据双向绑定,感兴趣的小伙伴们可以参考一下 2016-01-01 创建你的第一个AngularJS应用的方法 这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下 2015-06-06 AngularJS中的Promise详细介绍及实例代码 这篇文章主要介绍了AngularJS中的Promise详细介绍及实例代码的相关资料,Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件,需要的朋友可以参考下 2016-12-12 最新评论

依赖注入(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。

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
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代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。

以上就是对Angular JS依赖注入的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • AngularJS $injector 依赖注入详解
  • AngularJs动态加载模块和依赖注入详解
  • 详解AngularJS中的依赖注入机制
  • 详解Angularjs中的依赖注入
  • AngularJS学习笔记之依赖注入详解
  • AngularJS 依赖注入详解及示例代码
  • AngularJs 动态加载模块和依赖
  • AngularJS之依赖注入模拟实现
  • AngularJS 依赖注入详解和简单实例
  • Angular.JS学习之依赖注入$injector详析
张贴在3