AngularJS的依赖注入实例分析(使用module和injector)


Posted in Javascript onJanuary 19, 2017

本文实例分析了AngularJS的依赖注入。分享给大家供大家参考,具体如下:

依赖注入(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代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
vue中nextTick用法实例
Sep 11 Javascript
vue视频播放暂停代码
Nov 08 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
react.js 翻页插件实例代码
Jan 19 #Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 #Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 #Javascript
创建一般js对象的几种方式
Jan 19 #Javascript
You might like
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python sep参数使用方法详解
2020/02/12 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
外贸主管求职简历的自我评价
2013/10/23 职场文书
高一学生评语大全
2014/04/25 职场文书
出租房屋协议书
2014/09/14 职场文书
网络营销计划
2015/01/17 职场文书
语文教师个人工作总结
2015/02/06 职场文书
校园广播稿范文
2015/08/19 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python