AngularJS学习笔记之依赖注入详解


Posted in Javascript onMay 16, 2016

     最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......AngularJS学习笔记之依赖注入详解),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错。但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习惯习惯的...

不过幸好在看电子书之前,我已经稍微有点基础了,之前看着视频学习了一些,从双向数据绑定到服务,然后到指令系统,都多多少少有些接触。并且在一次web专选课结课作业当中,通过前端的AngularJS和后台的NodeJS加Mongoose搭建了一个简易学生班级管理系统。因为没有钱,所以只能放在GitHub了,GitHub地址: 学生管理系统,欢迎来fork哈,下面进入正题...

=======================================请叫我华丽的分割线=======================================

     

一个对象通常有三种方式可以获得对其依赖的控制权:

  (1) 在内部创建依赖;
  (2) 通过全局变量进行引用;
  (3) 在需要的地方通过参数进行传递。

依赖注入是通过第三种方式实现的。其余两种方式会带来各种问题,例如污染全局作用域,使隔离变得异常困难等。依赖注入是一种设计模式,它可以去除对依赖关系的硬编码,从而可以在运行时改变甚至移除依赖关系。

  在运行时修改依赖关系的能力对测试来讲是非常理想的,因为它允许我们创建一个隔离的环境,从而在测试环境可以使用模拟的对象取代生产环境中的真实对象。

 从功能上看,依赖注入会事先自动查找依赖关系,并将注入目标告知被依赖的资源,这样就可以在目标需要时立即将资源注入进去。

 在编写依赖于其他对象或库的组件时,我们需要描述组件之间的依赖关系。在运行期,注入器会创建依赖的实例,并负责将它传递给依赖的消费者。

// 出自Angular文档的优秀示例
function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
//注意,示例代码在全局作用域上创建了一个控制器,这并不是一个好主意,这里只是为了方便演示。

SomeClass 能够在运行时访问到内部的 greeter ,但它并不关心如何获得对 greeter 的引用。为了获得对 greeter 实例的引用, SomeClass 的创建者会负责构造其依赖关系并传递进去。

基于以上原因,AngularJS使用 $injetor (注入器服务)来管理依赖关系的查询和实例化。事实上, $injetor 负责实例化AngularJS中所有的组件,包括应用的模块、指令和控制器等。

在运行时,任何模块启动时 $injetor 都会负责实例化,并将其需要的所有依赖传递进去。

例如下面这段代码。这是一个简单的应用,声明了一个模块和一个控制器:

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});

当AngularJS实例化这个模块时,会查找 greeter 并自然而然地把对它的引用传递进去:

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>

而在内部,AngularJS的处理过程是下面这样的:

// 使用注入器加载应用
var injector = angular.injector(['ng', 'myApp']);
// 通过注入器加载$controller服务
var $controller = injector.get('$controller');
// 加载控制器并传入一个作用域,同AngularJS在运行时做的一样
var scope = injector.get('$rootScope').$new();
var MyController = $controller('MyController', {$scope: scope});

上面的代码中并没有说明是如何找到 greeter 的,但是它的确能正常工作,因为 $injector会负责为我们查找并加载它。

AngularJS通过 annotate 函数,在实例化时从传入的函数中把参数列表提取出来。在Chrome的开发者工具中输入下面的代码可以查看这个函数:

> injector.annotate(function($q, greeter) {})
 ["$q", "greeter"]

在任何一个AngularJS的应用中,都有 $injector 在进行工作,无论我们知道与否。当编写控制器时,如果没有使用 [] 标记或进行显式的声明, $injector 就会尝试通过参数名推断依赖关系。

推断式注入声明 

如果没有明确的声明,AngularJS会假定参数名称就是依赖的名称。因此,它会在内部调用函数对象的 toString() 方法,分析并提取出函数参数列表,然后通过 $injector 将这些参数注入进对象实例。注入的过程如下:

injector.invoke(function($http, greeter) {});

请注意,这个过程只适用于未经过压缩和混淆的代码,因为AngularJS需要原始未经压缩的参数列表来进行解析。有了这个根据参数名称进行推断的过程,参数顺序就没有什么重要的意义了,因为AngularJS会帮助我们把属性以正确的顺序注入进去。

显式注入声明

AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。可以通过$inject 属性来实现显式注入声明的功能。函数对象的 $inject 属性是一个数组,数组元素的类型是字符串,它们的值就是需要被注入的服务的名称。

下面是示例代码:

var aControllerFactory =
function aController($scope, greeter) {
console.log("LOADED controller", greeter);
// ……控制器
};
aControllerFactory.$inject = ['$scope', 'greeter']; // Greeter服务
console.log("greeter service");
}
// 我们应用的控制器
angular.module('myApp', [])
.controller('MyController', aControllerFactory)
.factory('greeter', greeterService);
// 获取注入器并创建一个新的作用域
var injector = angular.injector(['ng', 'myApp']),
controller = injector.get('$controller'),
rootScope = injector.get('$rootScope'),
newScope = rootScope.$new();
// 调用控制器
controller('MyController', {$scope: newScope});

对于这种声明方式来讲,参数顺序是非常重要的,因为 $inject 数组元素的顺序必须和注入参数的顺序一一对应。这种声明方式可以在压缩后的代码中运行,因为声明的相关信息已经和函数本身绑定在一起了。

行内注入声明

AngularJS提供的注入声明的最后一种方式,是可以随时使用的行内注入声明。这种方式其实是一个语法糖,它同前面提到的通过 $inject 属性进行注入声明的原理是完全一样的,但允许我们在函数定义时从行内将参数传入。此外,它可以避免在定义过程中使用临时变量。

在定义一个AngularJS的对象时,行内声明的方式允许我们直接传入一个参数数组而不是一个函数。数组的元素是字符串,它们代表的是可以被注入到对象中的依赖的名字,最后一个参数就是依赖注入的目标函数对象本身。

示例如下:

angular.module('myApp')
.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
}]);

由于需要处理的是一个字符串组成的列表,行内注入声明也可以在压缩后的代码中正常运行。通常通过括号和声明数组的 [] 符号来使用它。

以上这篇AngularJS 依赖注入就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
javascript的键盘控制事件说明
Apr 15 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
javascript表单事件处理方法详解
May 15 #Javascript
基于jquery实现ajax无刷新评论
Aug 19 #Javascript
JavaScript代码性能优化总结篇
May 15 #Javascript
window.onload绑定多个事件的两种解决方案
May 15 #Javascript
js仿淘宝和百度文库的评分功能
May 15 #Javascript
RequireJS使用注意细节
May 15 #Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
You might like
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python 数据结构之队列的实现
2017/01/22 Python
对python中的pop函数和append函数详解
2018/05/04 Python
PyCharm代码格式调整方法
2018/05/23 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
详解Django中异步任务之django-celery
2020/11/05 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
创业计划书撰写原则
2014/01/25 职场文书
商务经理岗位职责
2014/08/03 职场文书
环保建议书作文500字
2015/09/14 职场文书