AngularJs Dependency Injection（DI，依赖注入）
一、Dependency Injection（依赖注入）
依赖注入（DI）是一个软件设计模式，处理代码如何得到它所依赖的资源。
关于DI更深层次的讨论，可以参观Dependency Injection（http://en.wikipedia.org/wiki/Dependency_injection），Inversion of Control（http://martinfowler.com/articles/injection.html），也可以参观软件设计模式的书。
1. DI in a nutshell（简说DI）
object或者function，只能够通过以下三种方式获取他们依赖的资源：
1) 可以通过new运算符创建依赖的资源。
2) 可以通过全局变量查找依赖的资源。
3) 可以通过参数传入依赖的资源。
1、2两种方式，并不是最佳的，因为它们对依赖关系进行hard code，这使得修改依赖关系时，不是不可能，但会变得比较复杂。这对于测试来说尤其是个问题，通常在独立测试时，希望能够提供模拟的依赖资源。
第3种方法相对来说最可行，因为它去除了从组件（component）中定位依赖的责任。依赖仅仅交给组件就可以了。
function SomeClass(greeter) {
this.greeter = greeter
}
SomeClass.prototype.doSomething = function(name) {
this.greeter.greet(name);
}
上面的例子，SomeClass不用关心定位greeter这个依赖，它仅仅在运行时传递greeter。
这样是比较合适的，但它将获取依赖资源的责任交给了负责构建SomeClass的代码那里。
为了管理创建依赖的责任，每一个angular应用都有一个injector（http://code.angularjs.org/1.0.2/docs/api/angular.injector）。injector是一个服务定位器，负责定位并创建依赖的资源。
请求依赖，解决了hard code的问题，但它意味着injector需要贯穿整个应用。传递injector，会破坏Law of Demeter（http://baike.baidu.com/view/823220.htm）。为了纠正这个问题，我们将依赖查找的责任转给injector。
上面说了那么多，看看下面经我修改过的例子，合并了原文的两个例子，分别在angular内、外使用inject：
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>injector</title>
</head>
<body>
<div ng-controller="MyController">
<button ng-click="sayHello()">Say Hello</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
//创建OtherModule这个module，相当于外部的module
var otherModule = angular.module("OtherModule", []);
//教injector如何创建"greeter"
//注意，greeter本身需要依赖$window
otherModule.factory("greeter", function ($window) {
//这里是一个工厂方法，负责创建greet服务
return {
greet:function (text) {
$window.alert(text);
}
};
});
//下面展示在非当前module中，通过injector调用greet方法：
//从module中创建新的injector
//这个步骤通常由angular启动时自动完成。
//必须引入'ng'，angular的东东
//故意颠倒顺序，暂时证实这玩意的顺序是无所谓的。。
var injector = angular.injector(['OtherModule','ng']);
//请求greeter这个依赖。
var g = injector.get("greeter");
//直接调用它~
g.greet("Hi~My Little Dada~");
//这里是当前的主app，需要依赖OtherModule
var mainApp = angular.module("MainApp", ["OtherModule"]);
//留意Controller的定义函数的参数，在这里直接注入$scope、greeter。
// greeter服务是在OtherModule中的
mainApp.controller("MyController",function MyController($scope,greeter) {
$scope.sayHello = function() {
greeter.greet("Hello Kitty~~");
};
}
);
//ng-controller已经在背后默默地做了这个事情
//injector.instantiate(MyController);
</script>
</body>
</html>
注意，因为有ng-controller，初始化了MyController，它可以满足MyController的所有依赖需要，让MyController无须知道injector的存在。这是一个最好的结果。应用代码简单地请求它所需要的依赖而不需要处理injector。这样设置，不会打破Law of Demeter。
二、Dependency Annotation（依赖注释，说明依赖的方式）
injector如何知道什么服务需要被注入呢？
应用开发者需要提供被injector用作解决依赖关系的注释信息。所有angular已有的API函数，都引用了injector，每一个文档中提及的API都是这样。下面是用服务名称信息注释我们的代码的三个等同的方法。
1. Inferring Dependencies（隐含依赖）
这是获取依赖资源的最简单的方式，但需要假定function的参数名称与依赖资源的名称一致。
function MyController($scope, greeter) {
...
}
函数的injector，可以通过检查函数定义并提取函数名称，猜测需要注入的service的名称（functionName.toString()，RegExp）。在上面的例子中，$scope和greeter是两个需要被注入到函数的服务（名称也一致）。
虽然这样做很简单，但这方法在javascript混淆压缩后就行不通了，因为参数名称会被改变。这让这个方式只能对pretotyping（产品可用性原型模拟测试法，http://www.pretotyping.org/，http://tech.qq.com/a/20120217/000320.htm）和demo应用有作用。
2. $inject Annotation（$inject注释）
为了允许脚本压缩器重命名函数的方法后，仍然能够注入正确的服务，函数必须通过$inject属性来注释依赖。$inject属性是一个需要注入的服务的名称的数组。
var MyController = function(renamed$scope, renamedGreeter) {
...
}
//这里依赖的东东，如果不在当前的module中，它还是不认识的。//需要在当前module中先依赖对应的module。跟之前的例子差不多。但我不知道这是不是正确的方法。MyController.$inject = ['$scope', 'greeter'];
需要小心的是，$inject的顺序需要与函数声明的参数顺序保持一致。
这个注释方法，对于controller声明来说是有用的，因为它与函数一起指定注释信息。
3. inline Annotation（行内注释）
有时候，不方便使用$inject注释的方式，例如注释directive的时候。
例如：
someModule.factory('greeter', function($window) {
...;
});
因为需要临时变量（防止压缩后不能使用），所以代码会膨胀为：
var greeterFactory = function(renamed$window) {
...;
};
greeterFactory.$inject = ['$window'];
someModule.factory('greeter', greeterFactory);
由于这样（代码膨胀），angular还提供了第三种注释风格：
someModule.factory('greeter', ['$window', function(renamed$window) {
...;
}]);
记住，所有注释风格都是等价的，可以被用在支持injection的angular中的任何地方。
三、Where can I user DI？
DI遍及整个angular。它通常使用在controller和factory方法中。
1. DI in controllers
controller是负责（描述）应用行为的类。建议的controller声明方法是：
var MyController = function(dep1, dep2) {
...
}
MyController.$inject = ['dep1', 'dep2'];
MyController.prototype.aMethod = function() {
...
}
2. Factory methods
factory方法是负责创建大多数angular对象。例如directive、service、filter。factory方法注册在module中，建议的factory声明方法是：
angualar.module('myModule', []).
config(['depProvider', function(depProvider){
...
}]).
factory('serviceId', ['depService', function(depService) {
...
}]).
directive('directiveName', ['depService', function(depService) {
...
}]).
filter('filterName', ['depService', function(depService) {
...
}]).
run(['depService', function(depService) {
...
}]);
以上就是对AngularJS Dependency Injection 的资料整理后续继续补充，谢谢大家对本站的支持！
相关推荐
-
AngularJS 依赖注入详解和简单实例
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会
-
详解AngularJS中的依赖注入机制
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);
-
AngularJS入门教程之XHR和依赖注入详解
到现在为止,我们使用是硬编码的三条手机记录数据集.现在我们使用AngularJS一个内置服务$http来获取一个更大的手机记录数据集.我们将使用AngularJS的依赖注入(dependency injection (DI))功能来为PhoneListCtrl控制器提供这个AngularJS服务. 请重置工作目录: git checkout -f step-5 刷新浏览器,你现在应该能看到一个20部手机的列表. 步骤4和步骤5之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数
-
详解Angularjs中的依赖注入
一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { this.greeter.greet(name); }; SomeClass能够在运行时访问到内部的greeter,但它并不关心
-
自学实现angularjs依赖注入
在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是就模仿着写了一个,如果有什么不对,请大家批评指正. 其实刚开始的时候我也不知道怎么下手,源码中有些确实晦涩难懂,到现在我也没有看明白,于是我就静下心想一想,他是怎么用的,如下所示: angular.module(/*省略*/) .factory("xxxService"
-
AngularJS Module方法详解
AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?
-
AngularJS 依赖注入详解及示例代码
依赖注入是一个在组件中给出的替代了硬的组件内的编码它们的依赖关系的软件设计模式.这减轻一个组成部分,从定位的依赖,依赖配置.这有助于使组件可重用,维护和测试. AngularJS提供了一个至高无上的依赖注入机制.它提供了一个可注入彼此依赖下列核心组件. 值 工厂 服务 提供者 常值 值 值是简单的JavaScript对象,它是用来将值传递过程中的配置相位控制器. //define a module var mainApp = angular.module("mainApp", []);
-
AngularJS之依赖注入模拟实现
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的. 下面,我们看看AngularJS中常用的实现方式. 方法一:推断式注入声明,假定参数名称就是依赖的名称.因此,它会在内部调用函数对象的toString()方法,分析并提取出函数参数列表,然后通过$injector将这些参数注入进对象实例. 如下: //方法一:推断式注入声明,假定参数名称就是依赖
-
AngularJS学习笔记之依赖注入详解
最近在看AngularJS权威指南,由于各种各样的原因(主要是因为我没有money,好讨厌的有木有......),于是我选择了网上下载电子版的(因为它不要钱,哈哈...),字体也蛮清晰的,总体效果还不错.但是,当我看到左上角的总页码的时候,479页....479....479....俺的小心脏被击穿了二分之一有木有啊,上半身都石化了有木有啊,那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊,我平常看的电子书百位数都不大于3的好伐! 哎,原谅我吧,我应该多看几本新华字典习
-
AngularJS应用开发思维之依赖注入3
找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的API通过一个全局对象:$ 暴露出来,当你需要 进行ajax调用时,使用$.ajax()就可以了.这样的API很符合思维的预期. AngularJS也暴露了一个全局对象:angular,也对ajax调用进行封装提供了一个 $http对象,但是,但是,当你试图沿用旧经验访问angular.$http时,发
-
AngularJS的依赖注入实例分析(使用module和injector)
本文实例分析了AngularJS的依赖注入.分享给大家供大家参考,具体如下: 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.AngularJS作为前台js框架,也提供了对DI的支持,这是JavaScript/jQuery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务
-
AngularJS $injector 依赖注入详解
推断式注入 这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v
-
AngularJs动态加载模块和依赖注入详解
废话不多说,进入正题... 首先我们看下文件结构: Angular-ocLazyLoad --- demo文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-cont