Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解这一核心概念。

维基百科对依赖注入的解释

在软件工程中,依赖注入是实现控制反转的一种软件设计模式,一个依赖是一个被其他对象(client)调用的对象(服务),注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为。将 被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所需对象是DI的基本原则。 依赖注入允许程序设计遵从依赖倒置原则(简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合) 调用者(client)只需知道服务的接口,具体服务的查找和创建由注入者(injector)负责处理并提供给client,这样就分离了服务和调用者的依赖,符合低耦合的程序设计原则。

依赖注入中的角色

从维基百科解释可知, DI中包含三个角色,调用者(client), 服务(service)和注入者 (injector),下面开始介绍本文的主题 Angular的依赖注入。

Angular依赖注入分析

先看看下面这段 hello,world代码 (注意:设置了严格模式或压缩混淆代码后 下面的代码不能正常工作,后面有解释)

angular.module('myApp', [])
.controller('Ctl', function ($scope, $log) {
$scope.name = 'leonwgc';
$log.log('hello,world');
});

上面这段代码就用到了angular的依赖注入,代码首先创建了一个myApp模块,然后在此模块中创建了Ctl控制器,创建控制器函数的第二个参数则是控制器的构造函数, 构造函数声明了对$scope和$log服务的依赖。 当构造函数执行时, 即可获得$scope和$log服务实例,进行操作。 从我们前面对DI的了解,$scope和$log是由注入器injector 提供,知道了injector的存在,我们直接从angular的源码中将其找出,如下:

function createInternalInjector(cache, factory) {
// 中间一段略去... // 调用client
function invoke(fn, self, locals, serviceName) {
if (typeof locals === 'string') {
serviceName = locals;
locals = null;
} var args = [],
// 查询依赖
$inject = createInjector.$$annotate(fn, strictDi, serviceName),
length, i,
key; // 中间一段略去...
// 遍历$inject数组调用getService获取服务.... //开始执行client , args则是依赖的全部服务,injector都为我们创建好了
return fn.apply(self, args);
} // 中间一段略去... // 这里返回公开的injector对象
return {
// 执行DI方法,比如上面的控制器函数
// invoke方法首先就是调用annotate取得依赖
// 然后调用get取得服务
// 如果缓存中没有服务,get内部调用instantiate创建服务并缓存
// 最后利用function.apply传入依赖并执行
invoke: invoke,
// 实例化(创建)服务
instantiate: instantiate,
// 获取服务(如果缓存中有,直接从缓存拿,没有则调用instantiate创建并放入缓存,下次直接从缓存拿)
get: getService,
// 获得依赖服务
annotate: createInjector.$$annotate,
// 检查缓存中是否包含服务
has: function(name) {
return providerCache.hasOwnProperty(name + providerSuffix)
|| cache.hasOwnProperty(name);
}
};
}

源码中查询依赖的源码如下:

function annotate(fn, strictDi, name) {
var $inject,
fnText,
argDecl,
last; if (typeof fn === 'function') {
// 如果我们直接给函数添加了$inject依赖
// 则直接返回依赖,后面不做处理
if (!($inject = fn.$inject)) {
$inject = [];
if (fn.length) {
if (strictDi) {
if (!isString(name) || !name) {
name = fn.name || anonFn(fn);
}
throw $injectorMinErr('strictdi',
'{0} is not using explicit annotation...', name);
}
// 针对直接在构造函数中使用服务的情况
// 使用function.toString() 然后正则匹配出依赖的对象
// 所以上面例子如果混淆了代码就呵呵了
// 最后存入$inject数组
fnText = fn.toString().replace(STRIP_COMMENTS, '');
argDecl = fnText.match(FN_ARGS);
forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) {
arg.replace(FN_ARG, function(all, underscore, name) {
$inject.push(name);
});
});
}
//给构造函数添加$inject属性
fn.$inject = $inject;
}
} else if (isArray(fn)) {
last = fn.length - 1;
assertArgFn(fn[last], 'fn');
// 如果是数组格式,则依赖对象是数组的第一个到倒数第二个对象
// 要调用的函数则是数组的最后一个元素
$inject = fn.slice(0, last);
} else {
assertArgFn(fn, 'fn', true);
}
// 返回依赖数组
return $inject;
}

看了上面的源码片段和解释,想必大家对angular的依赖注入有了整体的认识。

下面是另外两种推荐的声明依赖的方式

1. 数组注释 (推荐), js压缩混淆不会有影响。

angular.module('myApp', [])
.controller('Ctl', ['$scope', '$log', function ($scope, $log) {
$scope.name = 'leonwgc';
$log.log('hello,world');
}]);

2.$inject 属性 ,js压缩混淆不会有影响

angular.module('myApp', [])
.controller('Ctl', Ctrl); function Ctrl($scope, $log) {
$scope.name = 'leonwgc';
$log.log('hello,world');
} // 给构造函数添加$inject属性,
// $inject是一个数组,元素是依赖的服务名.
Ctrl.$inject = ["$scope", "$log"];

Angular引入了大量后端开发的概念,而前端同学可能还不熟悉,望本文能有所帮助。

Angular依赖注入详解的更多相关文章

  1. angularjs MVC、模块化、依赖注入详解

    一.MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> ...

  2. spring 之 IOC 依赖注入详解

    当我们对一个javaBean进行实例化时,在原本的情况下我们会选择新建一个接口,然后进行实例化,为了进一步降低耦合度我们还会使用工厂模式进行封装. 例: 当我们想要去造,Chinese.America ...

  3. DI:依赖注入详解

    DI(依赖注入) 依赖注入的理解: 一般写程序的时候service层都需要用到dao层,所以一般都是在service层里面new  dao ,而现在利用依赖注入的方式,直接把dao给了service层 ...

  4. 一、.Net Core 依赖注入详解及Autofac使用

    .NET中的依赖注入实际上帮助我们解耦了我们的代码,是控制反转和依赖反转原则的具体实现. .Net Core的依赖注入的好处: 1. application 更稳定,容易维护和演化: 2. 实现细节的 ...

  5. 30行代码让你理解angular依赖注入:angular 依赖注入原理

    依赖注入(Dependency Injection,简称DI)是像C#,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖 ...

  6. angular 依赖注入原理

    依赖注入(Dependency Injection,简称DI)是像C#,java等典型的面向对象语言框架设计原则控制反转的一种典型的一种实现方式,angular把它引入到js中,介绍angular依赖 ...

  7. WPF依赖属性详解

    WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency P ...

  8. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  9. [译] 关于 Angular 依赖注入你需要知道的

    如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...

随机推荐

  1. Nginx安装与使用

    前言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大 ...

  2. document的createDocumentFragment()方法

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  3. script标签跨域的缺点

    1,只支持GET,不支持其他例如:put,delete,post等 2,想拿到数据需要服务器端做出相应处理,必须在window域下面有对应的执行函数.例如:window.callbackHandler ...

  4. 【39】FlexboxLayout使用介绍

    FlexboxLayout介绍: Flexbox 也称为弹性盒子模型 或伸缩盒子模型,广泛用于前端开发,做过前端 web 的都知道Bootstrap 中有一套强大的 CSS Grid网格样式.Boot ...

  5. 并发编程之 LinkedBolckingQueue 源码剖析

    前言 JDK 1.5 之后,Doug Lea 大神为我们写了很多的工具,整个 concurrent 包基本都是他写的.也为我们程序员写好了很多工具,包括我们之前说的线程池,重入锁,线程协作工具,Con ...

  6. CentOS7.5安装MongoDB4.0与CRUD基本操作

    一 MongoDB简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数 ...

  7. escapeRegExp捕捉通配符的代码解析

    费了好几个小时,把一小段正则代码搞通了,回顾并记下,加深记忆. 该段代码来自yii.js,它也是引自stackoverflow,地址是:http://stackoverflow.com/questio ...

  8. Android中的TextView实现多行显示省略号以及下划线的实现

    android:lines="2" android:ellipsize="end" 显示两行,多余部分…显示 textView.getPaint().setFl ...

  9. master.sys.sysprocesses相关内容

    sysprocesses 表中保存关于运行在 Microsoft® SQL Server™ 上的进程的信息.这些进程可以是客户端进程或系统进程. sysprocesses 只存储在 master 数据 ...

  10. HDU 2588 GCD 【Euler + 暴力技巧】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=2588 GCD Time Limit: 2000/1000 MS (Java/Others)    Mem ...