AngularJS之Dependency Injection（五）
前言
这一节我们来讲讲AngularJS中的依赖注入，在实际开发中Angular提供了具体的方法供我们去调用，但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手，所以基于此我们有必要深入一点去了解内部的基本原理，这样我们才能将Angular玩弄于鼓掌之间。
话题
在讲述依赖注入时我们有必要讲一讲一个组件decorator（暂且叫做装饰者）。它也是创建服务的一个例子。decorator是一种设计模式，它能隔离修改及在不修改源码的前提下进行修改。在Angular中，它能够在服务、指令、过滤器使用之前被修改。
我们应该如何去使用使用装饰者，我们有两种方法来注册装饰者 $provide.decorator 和 module.decorator 这两种都有一个 $delegate ，这个被用来初始化服务、过滤器、指令。我们主要介绍第一种注册装饰者的方法
$provide.decorator
我们看看在Angular中日志服务是怎么来的。
angular.module('myApp', [])
.config([ '$provide', function($provide) {
$provide.decorator('$log', [
'$delegate',
function $logDecorator($delegate) {
var originalWarn = $delegate.warn;
$delegate.warn = function decoratedWarn(msg) {
msg = 'Decorated Warn: ' + msg;
originalWarn.apply($delegate, arguments);
};
return $delegate;
}
]);
}]);
一旦日志服务被初始化后，装饰者（decorator）就会被触发，decorator函数有一个注入到访问在装饰者中匹配所选择的服务的$delegate对象。$delegate是我们正在装饰的服务对象，提供装饰者返回的函数值将代替正在被装饰的服务、过滤器、指令。简单来讲，通过decorator我们能够在服务、过滤器或者指令使用之前进行适当的修改来满足我们所需，也就是说这是最原始实例化服务的方法，我们通过可以此方法来打补丁或者重写、修改等操作。在前面系列中我们讲了三种创建服务的方法，这节讲述怎样注册组件并且注入他们以此来解析依赖。
注册组件
通过$provide服务来注册例如下面服务以至于他们能被注入来满足依赖。这些组件是通过$injector而注册（下面会讲），当我们请求一个服务时，通过$injector来找到正确的service provider。初始化服务提供者并通过调用$get工厂函数来获取服务实例。通过$provide服务定义的许多服务方法被暴露在angular.module中。如下提供几个有用的通过$provide服务定义的方法。
| Name | Descriptions |
| constant(name, value) | 定义一个constant值 |
| decorator(name, service) | 定义一个服务decorator |
| factory(name, service) | 定义一个服务 |
| provider(name, service) | 定义一个服务 |
| service(name, provider) | 定义一个服务 |
| value(name, value) | 定义一个值服务 |
如上除了decorator未被暴露在angular.module中，原因猜想大概是：由于是最原始的初始化服务的方法，所以在大部分情况下我们都不会用到，除非在特定情况下要进行某一目的的特定修改我们才需要，所以未进行显式的暴露。在这里我们有必要来演示下。我们在Angular原始日志服务基础上添加一点信息来进行打印。
界面代码如下：
<head>
<meta charset="utf-8"/>
<title>Angular Injection</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet"/>
<script src="../Scripts/angular.min.js"></script>
<script src="../DependencyInjection/Decoration.js"></script> </head>
<body ng-controller="indexController">
<div class="well">
<button class="btn btn-primary" ng-click="handleClick()">Click Me!</button>
</div>
</body>
</html>
脚本代码：
var testApp = angular.module('TestApp', []);
testApp.controller("indexController", function ($scope, $log) {
$scope.handleClick = function () {
$log.log("Button Clicked");
};
})
.config(function ($provide) {
$provide.decorator("$log", function ($delegate) {
$delegate.originalLog = $delegate.log;
$delegate.log = function (message) {
$delegate.originalLog("通过原始Decoration方法打印: " + message);
}
return $delegate;
});
});
通过上述脚本我们知道我们只是打印了【Button Clicked】，但是我们在使用日志服务之前添加了【通过原始Decoration方法打印】。我们看看效果：
管理组件
上述我们讲到通过$injector来管理组件，到底是怎么管理组件呢？当我们定义创建了组件时，我们需要用到时则要用$injector来获取我们定义的组件。它可以获取例如类型、调用方法、加载模块。下面我们来看看$injector服务有关方法：
| Name | Descriptions |
| annotate(fn) | 获取指定服务函数的参数，同时也包括那些与服务未通信的参数 |
| get(name) | 获取指定服务名称的服务对象 |
| has(name) | 判断指定服务名称的服务对象是否存在，若存在返回true，否则为false |
| invoke(fn, self, locals) | 调用指定函数, 使用指定函数的指定值以及非服务的参数值 |
$injector服务是AngularJS服务类库的核心，但是我们很少直接通过它来进行某些操作，但是我们有必要并且是有用的通过它来了解AngularJS的工作原理。
JS是一门动态而且牛逼的语言，但是还是缺少一点特性，比如在执行过程中动作的注释，而在C#中我们可以通过特性来看到，所以基于这种情况，我们来实现这种注释情况。
我们只需将上述控制器代码进行如下修改即可：
testApp.controller("indexController", function ($scope, $log, $injector) {
var counter = 0;
var logClick = function ($log, $exceptionHandler, message) {
if (counter == 0) {
$log.log(message);
counter++;
} else {
$exceptionHandler("Already clicked");
}
}
$scope.handleClick = function () {
var deps = $injector.annotate(logClick); //通过annotate方法来获取logClick函数其参数
for (var i = 0; i < deps.length; i++) {
console.log("Dependency: " + deps[i]);
}
};
})
获取我们logClick函数注入的服务以及参数，如下：
获取服务通过injector
我们来获取根元素的$injector服务，我们继续修改控制器代码，如下：
testApp.controller("indexController", function ($scope, $log, $rootElement) {
var counter = 0;
var logClick = function ($log, $exceptionHandler, message) {
if (counter == 0) {
$log.log(message);
counter++;
} else {
$exceptionHandler("不能再点击啦，点爆啦，哥们！");
}
}
$scope.handleClick = function () {
var localVars = { message: "第一次点击" };
$rootElement.injector().invoke(logClick, null, localVars);
};
})
$injector vs inject vs injector()
在我们注入组件后，需要获取该组件则可以通过$injector.get("serviceName")来获取所需服务，而inject同样也可以获取我们所需组件，如下：
app.controller('indexCtrl', indexCtrl);
indexCtrl.$inject = ['$scope','customService'];
function indexCtrl($scope, customService) {
.........
}
上述inject获取服务内部实质是通过$injector来获取（通过查资料得知，不太确定），通过$inject来获取服务更方便且简洁。上述还有一个injector方法，此方法用来获取元素所在模块的injector，通过 angular.element("id").injector() 来获取。讲到这里，顺便也讲讲scope方法，也是获取元素所在的作用域，通过 angular.element("id").scope() 来获取。
总结
今天我们就讲到这里，休息！
AngularJS之Dependency Injection（五）的更多相关文章
- AngularJs学习笔记--Dependency Injection（DI，依赖注入）
原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...
- Dependency Injection 筆記 (2)
续上集,接着要说明如何运用 DI 来让刚才的范例程序具备执行时期切换实现类型的能力. (本文摘自電子書<.NET 依賴注入>) 入门范例—DI 版本 为了让 AuthenticationS ...
- Dependency Injection 筆記 (1)
<.NET 依賴注入>連載 (1) 本文从一个基本的问题开始,点出软件需求变动的常态,以说明为什么我们需要学习「依赖注入」(dependency injection:简称 DI)来改善设计 ...
- asp.net core 系列之Dependency injection(依赖注入)
这篇文章主要讲解asp.net core 依赖注入的一些内容. ASP.NET Core支持依赖注入.这是一种在类和其依赖之间实现控制反转的一种技术(IOC). 一．依赖注入概述 1.原始的代码 依赖 ...
- Ninject学习（一） - Dependency Injection By Hand
大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...
- MVC Controller Dependency Injection for Beginners【翻译】
在codeproject看到一篇文章,群里的一个朋友要帮忙我翻译一下顺便贴出来,这篇文章适合新手,也算是对MEF的一个简单用法的介绍. Introduction In a simple stateme ...
- 控制反转Inversion of Control (IoC) 与 依赖注入Dependency Injection (DI)
控制反转和依赖注入 控制反转和依赖注入是两个密不可分的方法用来分离你应用程序中的依赖性.控制反转Inversion of Control (IoC) 意味着一个对象不会新创建一个对象并依赖着它来完成工 ...
- [转载][翻译] IoC 容器和 Dependency Injection 模式
原文地址:Inversion of Control Containers and the Dependency Injection pattern 中文翻译版本是网上的PDF文档,发布在这里仅为方便查 ...
- Dependency Injection
Inversion of Control - Dependency Injection - Dependency Lookup loose coupling/maintainability/ late ...
随机推荐
- 2-Sat问题
二分+2-Sat 判断是否可行 输出字典序最小的解 输出字典序可行解 其实这些都是小问题,最重要的是建图,请看论文. 特殊的建边方式,如果a b是一对,a必须选,那么就是b->a建边. HDU ...
- UBUNTU 16.04 编译 OPENJDK8
参考了几篇文章,和错误查询,最后总结如下 一.下载 我比较倾向于使用mercurial来获取源代码,虽然你得挑网络稳定的时候更新,但是易更新. 从官网查找一下,可以通过以下步骤完成源代码的下载 1. ...
- IDEA+Tomcat+JRebel热部署1
所需资源下载: jrebel_6.4.2a 概述 JRebel是一个J2EE热部署的工具.使用它可以减少浪费8-18%的开发时间在项目的构建和部署上.之前只是听说过,一直没有实践,今天实际使用了一把 ...
- MongoDB的安装与设置MongoDB服务
Mongo DB 是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式备受当前IT从业人员的青睐.Mongo DB很好的实现了面向对象的思想(OO思想),在Mongo DB ...
- java基础知识小总结【转】
java基础知识小总结 在一个独立的原始程序里,只能有一个 public 类,却可以有许多 non-public 类.此外,若是在一个 Java 程序中没有一个类是 public,那么该 Java 程 ...
- centos下为大硬盘分区(大于2T)
问题:centos/redhat下使用分区工具fdisk创建大于2TB的分区,无法创建 关键字:MBR.GPT.CHS.LBA MBR:主引导记录 GPT:GUID 分区表 CHS:磁柱 磁头 扇区 ...
- STL之priority_queue
下面以 long long 型队列介绍: Q.empty() // 判断队列是否为空 返回ture表示空 返回false表示空 bool Q.top() // 返回顶端元素的值 元素还在队列里 lon ...
- spring mvc + ehcache 利用注解实现缓存功能
我的spring是3.1的,因为项目需求,需要在查询时候加上缓存,小白一个,完全没有用过缓存(ehcache),摸索了一天终于会了一点通过注解来使用ehcache进行缓存,立刻给记录下来. 首先 我的 ...
- 通过一组RESTful API暴露CQRS系统功能
命令和查询责任分离(CQRS)是由Greg Young提出的一种将系统的读(查询).写(命令)操作分离为两种独立子系统的架构模式.命令通常是异步执行的,并存储在一个事务型数据库中,而读操作则通常是最终 ...
- 我的第一段jQuery代码
说起 jQuery,很多人可能觉得,不算什么,就是个js类库.而,对于我,下面这几行代码,是一个新的开始. 多年来,我一直在使用MooTools ,他面向对象,写起来结构清晰分明,都是在原生js的基础 ...