Angular 理解module和injector,即依赖注入


Posted in Javascript onSeptember 07, 2016

依赖注入(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依赖注入的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
JS继承之借用构造函数继承和组合继承
Sep 07 #Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 #Javascript
jQuery实现底部浮动窗口效果
Sep 07 #Javascript
聊一聊Vue.js过渡效果
Sep 07 #Javascript
BootStrap中的表单大全
Sep 07 #Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 #Javascript
JavaScript 函数模式详解及示例
Sep 07 #Javascript
You might like
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python操作列表的函数使用代码详解
2017/12/28 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python 实现倒排索引的方法
2018/12/25 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
经典的班主任推荐信
2013/10/28 职场文书
实习生体会的自我评价范文
2013/11/28 职场文书
2014国培学习感言
2014/03/05 职场文书
伊索寓言教学反思
2014/05/01 职场文书
学生党员公开承诺书
2014/05/28 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
赤壁观后感(2)
2015/06/15 职场文书