AngularJs学习笔记--Dependency Injection(DI,依赖注入)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/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学习笔记--bootstrap
- AngularJs学习笔记--html compiler
- AngularJs学习笔记--concepts
- AngularJs学习笔记--directive
- AngularJs学习笔记--expression
- AngularJs学习笔记--Forms
- AngularJs学习笔记--I18n/L10n
- AngularJs学习笔记--IE Compatibility
- AngularJs学习笔记--Modules
- AngularJs学习笔记--Scope
- AngularJs学习笔记--Dependency Injection
- AngularJs学习笔记--Understanding the Model Component
- AngularJs学习笔记--Understanding the Controller Component
- AngularJs学习笔记--E2E Testing
- AngularJs学习笔记--Understanding Angular Templates
- AngularJs学习笔记--Using $location
- AngularJs学习笔记--Creating Services
- AngularJs学习笔记--Injecting Services Into Controllers
- AngularJs学习笔记--Managing Service Dependencies
- AngularJs学习笔记--unit-testing
AngularJs学习笔记--Dependency Injection(DI,依赖注入)的更多相关文章
- Angularjs学习笔记(三)----依赖注入
一.定义 如前所述,$scope对象被神秘的注入到了控制器中,实际上,这是因为控制器声明了它需要$scope,所以AngularJS才会创建并注入它.这套依赖管理系统可以这样总结:"为了正常 ...
- AngularJs 学习笔记(三)依赖注入
一个对象可以通过三种方式来获取对依赖对象的控制权: 1.在内部创建依赖的对象 2.通过全局变量引用这个依赖对象 3.通过参数进行传递(在这里是通过函数参数) AngularJs通过$injector注 ...
- go微服务框架kratos学习笔记八 (kratos的依赖注入)
目录 go微服务框架kratos学习笔记八(kratos的依赖注入) 什么是依赖注入 google wire kratos中的wire Providers injector(注入器) Binding ...
- Angular4学习笔记(四)- 依赖注入
概念 依赖注入是一种设计思想,并不是某一类语言所特有的,因此可以参考开涛大神关于学习Java语言的Spring框架时对其的解释: DI-Dependency Injection,即"依赖注入 ...
- ASP.NET Core 2 学习笔记(四)依赖注入
ASP.NET Core使用了大量的依赖注入(Dependency Injection, DI),把控制反转(Inversion Of Control, IoC)运用的相当巧妙.DI可算是ASP.NE ...
- Spring学习笔记--Spring配置文件和依赖注入
Spring配置文件 1.alias:设置别名,为bean设置别名,并且可以设置多个别名; <!-- 设置别名 --> <alias name="user" al ...
- 使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(六)-- 依赖注入
本篇将介绍Asp.Net Core中一个非常重要的特性:依赖注入,并展示其简单用法. 第一部分.概念介绍 Dependency Injection:又称依赖注入,简称DI.在以前的开发方式中,层与层之 ...
- ASP.NET Core 学习笔记 第三篇 依赖注入框架的使用
前言 首先感谢小可爱门的支持,写了这个系列的第二篇后,得到了好多人的鼓励,也更加坚定我把这个系列写完的决心,也能更好的督促自己的学习,分享自己的学习成果.还记得上篇文章中最后提及到,假如服务越来越多怎 ...
- .net core学习笔记(3)-依赖注入
.net core 中使用了大量的依赖注入,对依赖注入一直是一知半解,总想不透,项目中用的是一个网上的开源框架,从底层到web层都是用的构造函数依赖注入. 然后了在继承ActionFilterAttr ...
随机推荐
- Netty SSL性能调优
TLS算法组合 在TLS中,5类算法组合在一起,称为一个CipherSuite: 认证算法 加密算法 消息认证码算法 简称MAC 密钥交换算法 密钥衍生算法 比较常见的算法组合是 TLS_ECDHE_ ...
- 虚拟机下linux 的root密码忘记怎么修改(转)
1.开机时任意按一个方向键,进入界面,选择linux系统,按e键进入 2.然后用上下键选择kerner(内核)那一行,按e键进入编辑界面,编辑界面最后一行显示如下:(grub edit> ker ...
- log4j DailyRollingFileAppender, DatePattern 配置
在DailyRollingFileAppender中可以指定monthly(每月). weekly(每周).daily(每天).half-daily(每半天).hourly(每小时)和minutely ...
- Lakeshore用户手册
1.场景 场景是游戏的基本组成部分,开始界面,结束界面,每个关卡都是一个场景.游戏中基于游戏的情节,可以在各个场景间跳转. 2.精灵 精灵可以理解为图片的容器.如果需要在游戏场景中插入一个静态图片,那 ...
- html元素两种分类。替换元素和不可替换元素;块级元素和行内元素
根据元素本身特点来分类: 替换元素替换元素根据其标签和属性来决定元素的具体显示内容.有<img><input><textarea><select>< ...
- SSM面试
Spring两大核心:IOC AOP DI AOP:所谓面向切面变成,是一种通过预编译和运行期动态化代理的方式实现了再不修改源代码的情况下给程序动态添加功能的技术. Mybatis(半自动化实现obj ...
- JavaScript之parseInt()数值转换常被忽略的问题
使用parseInt()你可以从字符串中获取数值,该方法接受另一个基数参数,这经常省略,但不应该.当字符串以”0″开头的时候就有可能会出问题,例如,部分时间进入表单域,在ECMAScript 3中,开 ...
- 嵌套Golang对象的初始化
比如有这样一个对象: type ProductConfig struct { Site map[string]string } 对应的初始化可以如下写: var pc ProductCon ...
- poj3260 平衡问题(二维01背包)
http://www.cnblogs.com/ziyi--caolu/p/3228090.html http://blog.csdn.net/lyy289065406/article/details/ ...
- 廖雪峰JavaScript练习题3
请尝试写一个验证Email地址的正则表达式.版本一应该可以验证出类似的Email: 正则表达式: <!DOCTYPE html> <html> <head> < ...