AngularJS应用开发思维之依赖注入3


Posted in Javascript onAugust 19, 2016

找不到的API?
AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同。

$http
比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了。这样的API很符合思维的预期。

AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发现不是 那么回事!

仔细地查阅$http的文档,也找不到一点点的线索,从哪里可以把这个$http拿到。

依赖注入/DI
事实上,AngularJS把所有的功能组件都以依赖注入的方式组织起来:

AngularJS应用开发思维之依赖注入3

在依赖注入的模式下,所有的组件必须通过容器才能相互访问,这导致了在AngularJS中, 你必须通过一个中介才能获得某个组件的实例对象:

var injector = angular.injector(['ng']);
injector.invoke(function($http){
//do sth. with $http
});

这个中介,就是依赖注入模式中的容器,在AngularJS中,被称为:注入器。

在→_→的示例中,我们可以看到,我们已经拿到了$http对象,它其实是一个函数。

注入器/injector
注入器是AngularJS框架实现和应用开发的关键,这是一个DI/IoC容器的实现。

AngularJS将功能分成了不同类型的组件分别实现,这些组件有一个统称 - 供给者/provider, 下图中列出了AngularJS几个常用的内置服务:

AngularJS应用开发思维之依赖注入3

AngularJS的组件之间不可以互相直接调用,一个组件必须通过注入器才 可以调用另一个组件。这样的好处是组件之间相互解耦,对象的整个生命周期的管理 甩给了注入器。

注入器实现了两个重要的功能:

集中存储所有provider的配方
配方其实就是:名称+类构造函数。AngularJS启动时,这些provider首先使用其配方在注入器 内注册。比如,http请求服务组件封装在$httpProvider类内,它通过'$http'这个名字在注入 器内注册。

按需提供功能组件的实例
其他组件,比如一个用户的控制器,如果需要使用http功能,使用'$http'这个名字 向注入器请求,就可以获得一个http服务实例了。

试着修改→_→的代码,查看下$compile服务到底是什么?

注册服务组件
从injector的角度看,组件就是一个功能提供者,因此被称为供给者/Provider。 在AngularJS中,provider以JavaScript类(构造函数)的形式封装。

AngularJS应用开发思维之依赖注入3

服务名称通常使用一个字符串标识,比如'$http'代表http调用服务、'$rootScope'代表根 作用域对象、'$compile'代表编译服务...

Provider类要求提供一个$get函数(类工厂),injector通过调用该函数, 就可以获得服务组件的实例。

名称和类函数的组合信息,被称为配方。injector中维护一个集中的配方库, 用来按需创建不同的组件。这个配方库,其实就是一个Hash对象,key就是服务名称,value 就是类定义。

在→_→的示例中,我们定义了一个简单的服务类,这个服务类的实例就是一个字符串:“hello,world!”。 我们使用'ezHello'作为其服务名在注入器里注册,并通过注入器将这个实例显示出来。

获得注入器对象
要使用AngularJS的功能,必须首先获取注入器。有两种方法取得注入器。

创建一个新的注入器
可以使用angular.injector()创建一个新的注入器:

angular.injector(modules, [strictDi]); 获取已经创建的注入器
如果AngularJS框架已经启动,那么可以使用DOM对象的injector()方法获 得已经创建的注入器:

var element = angular.element(dom_element);
var injector = element.injector();

通过注入器调用API
注入器有两个方法可供进行API调用:invoke()和get()。

invoke()
使用注入器的invoke()方法,可以直接调用一个用户自定义的函数体,并通过函数参数 注入所依赖的服务对象,这是AngularJS推荐和惯例的用法:

angular.injector(['ng'])
.invoke(function($http){
//do sth. with $http
}); get()

也可以使用注入器的get()方法,获得指定名称的服务实例:

var my$http = angular.injector(['ng']).get('$http');
//do sth. with my$http

→_→的示例这次使用了get()方法直接获取一个服务实例,感受一下!

注入的方式和原理
有两种方法告知注入器需要注入的服务对象:参数名注入和依赖数组注入。

参数名注入
AngularJS在执行invoke()函数时,将待注入函数定义转化为字符串,通过 正则表达式检查其参数表,从而发现并注入所所依赖的服务对象:

//myfunc通过参数表声明这个函数依赖于'$http'服务
var myfunc = function($http){
//do sth. with $http
};
injector.invoke(myfunc);//myfunc的定义将被转化为字符串进行参数名检查

这样有一个问题,就是当我们对JavaScript代码进行压缩处理时,$http可能会被 变更成其他名称,这将导致注入失败。

依赖数组注入
AngularJS采用依赖项数组的方法解决代码压缩混淆产生的问题。这时传入invoke()的 是一个数组,数组的最后一项是实际要执行的函数,其他项则指明需要向该函数注入 的服务名称。注入器将按照数组中的顺序,依次向函数注入依赖对象。

采用这种方法,待注入函数的参数表的名称就无关紧要了:

//myfunc依赖于'$http'和'$compile'服务
var myfunc = ['$http','$compile',function(p1,p2){
//do sth. with p1($http),p2($compile)
}];
injector.invoke(myfunc);

→_→的实例这次采用依赖数组的方法注入了ezHello服务实例,可以改改参数名称 看有没有影响结果?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
javascript中常用编程知识
Apr 08 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 #Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 #Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 #Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 #Javascript
AngularJS之依赖注入模拟实现
Aug 19 #Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 #Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
安装Python的教程-Windows
2017/07/22 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python得到单词模式的示例
2018/10/15 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
留学推荐信写作指南
2014/01/25 职场文书
春季防火方案
2014/05/10 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
教师网络培训心得体会
2016/01/09 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android