依赖注入DI

angularjs中与DI相关有angular.module()、angular.injector()、 $injector$provide

DI 容器3要素:服务的注册、依赖关系的声明、对象的获取。

依赖注入

Spring中的DI

AngularJS中的DI

服务注册

通过xml配置文件的<bean>标签或是注解@Repository、@Service、@Controller、@Component实现的

module和$provide相当于是服务的注册;

依赖关系声明

可以在xml文件中配置,也可以使用@Resource等注解在java代码中声明

依赖关系的声明在angular中有3种方式,如下介绍

对象获取

ApplicationContext.getBean()实现

injector用来获取对象(angular会自动完成依赖的注入)

angular依赖关系声明的三种方式

angular提供了3种获取依赖的方式:inference、annotation、inline方式。

其中annotation和inline方式,对于函数参数名称没有要求,是推荐的做法;inference方式强制要求参数名称和服务名称一致,如果JS代码经过压缩或者混淆,那么功能会出问题,不建议使用这种方式。

// 创建myModule模块、注册服务
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
this.my = 0;
}); // 获取injector
var injector = angular.injector(["myModule"]); // 第一种inference
injector.invoke(function(myService){alert(myService.my);}); // 第二种annotation
function explicit(serviceA) {alert(serviceA.my);};
explicit.$inject = ['myService'];
injector.invoke(explicit); // 第三种inline
injector.invoke(['myService', function(serviceA){alert(serviceA.my);}]);

 

如何理解module?

The angular.module() is a global place for creating, registering and retrieving Angular modules.When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved。

该函数既可以创建新的模块,也可以获取已有模块,是创建还是获取,通过参数的个数来区分。

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module("myModule", []); // 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module("myModule"); // true,都是同一个模块
alert(createModule == getModule);

那么模块究竟是什么呢?

官方的Developer Guide上只有一句话:You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

就是说模块是一些功能的集合,如控制器、服务、过滤器、指令等子元素组成的整体。

 

$provide和模块的关系

The $provide service has a number of methods for registering components with the $injector. Many of these functions are also exposed on angular.Module.

之前提到过:module和provide是用来注册服务到injector中的。查看官方的API,可以看到$provide提供了provide()、constant()、value()、factory()、service()来创建各种不同性质的服务;angular.Module中也提供了这5个服务注册方法。其实2者功能是完全一样的,就是用来向DI容器注册服务到injector中。

官方API下的auto有$provide 和 $injector,Implicit module which gets automatically added to each $injector.按照字面意思是说,每一个injector都有这2个隐含的服务。

 

angular.injector()

使用angular.injector();也能获取到注入器,但是没有和模块绑定。这种做法是没有意义的,相当于是你创建了一个空的DI容器,里面都没有服务别人怎么用呢。正确的做法是,在创建注入器的时候,指定需要加载的模块。

// 创建myModule模块、注册服务
var myModule = angular.module('myModule', []);
myModule.service('myService', function() {
this.my = 0;
}); // 创建herModule模块、注册服务
var herModule = angular.module('herModule', []);
herModule.service('herService', function() {
this.her = 1;
}); // 加载了2个模块中的服务
var injector = angular.injector(["myModule","herModule"]);
alert(injector.get("myService").my);
alert(injector.get("herService").her);

特别需要注意下:angular.injector()可以调用多次,每次都返回新建的injector对象

var injector1 = angular.injector(["myModule","herModule"]);
var injector2 = angular.injector(["myModule","herModule"]); alert(injector1 == injector2);//false

参考:http://www.mamicode.com/info-detail-247448.html

Angular JS中的依赖注入的更多相关文章

  1. Atitit js中的依赖注入di ioc的实现

    Atitit js中的依赖注入di ioc的实现 全类名(FQCN)为标识符1 混合请求模式1 使用类内  builder  即可..2 Service locator method走ok拦2 Jav ...

  2. Angular.js中的$injector服务

    一 .angular中的依赖注入 angular的一个很重要的特性就是依赖注入,可以分开理解这4个字. 1.依赖: angular里面的依赖,有angular默认提供的,也有我们自己添加的.默认提供的 ...

  3. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  4. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  5. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  6. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  7. React 源码中的依赖注入方法

    一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道 ...

  8. Angular4中的依赖注入

    在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正 的实现可重用的组件. 如果我们有个服务product.service.ts,其中export了一个Pro ...

  9. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

随机推荐

  1. Jpinyin笔记

  2. HTML5 – 4.canvas

    1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. < ...

  3. Faster-rnnlm代码分析3 - EvaluateLM(前向计算ForwardPropagate)

    先采用一个简单的输入文本做测试 [root@cq01-forum-rstree01.cq01.baidu.com rnnlm]# pwd /home/users/chenghuige/rsc/app/ ...

  4. 菜鸟学Linux命令:nohup命令启动程序

    在UNIX/LINUX中,普通进程用&符号放到后台运行,如果启动该程序的控制台logout,则该进程随即终止. 要实现守护进程,一种方法是按守护进程的规则去编程,比较麻烦:另一种方法是仍然用普 ...

  5. 【Java EE 学习 19】【使用过滤器实现全站压缩】【使用ThreadLocal模式解决跨DAO事务回滚问题】

    一.使用过滤器实现全站压缩 1.目标:对网站的所有JSP页面进行页面压缩,减少用户流量的使用.但是对图片和视频不进行压缩,因为图片和视频的压缩率很小,而且处理所需要的服务器资源很大. 2.实现原理: ...

  6. 【PHP&&MySQL详解】

    PHP和MySQL是一对好搭档,PHP中有一个很大的扩展库专门针对对MySQL的操作.当然,作为一个PHP程序员,首先对MySQL的增删查改要非常熟悉才行. MySQL数据库的连接数大概在6w个左右, ...

  7. oracle删除用户下所有的表

    需要创建这些删除语句,通过oracle的数据字典找到该用户下的所有表.视图等对象,拼接成语句.如下select 'drop table '||table_name|| ' cascade constr ...

  8. Datagard產生gap

    本文轉載自無雙的小寶的博客:http://www.cnblogs.com/sopost/archive/2010/09/11/2190085.html 有時候因為網路或備份故障等原因,主機所產生的歸檔 ...

  9. [Tools] 使用work2013发布博客

    参考园子里推荐的方式,觉得使用word发布挺好的,尝试了一下,还不错,记录下来备用   参考连接: http://www.cnblogs.com/liuxianan/archive/2013/04/1 ...

  10. ServerSocket 默认邦定IP

    转自:http://cuisuqiang.iteye.com/blog/2037769 开发中需要开启服务端的时候,本地测试都是直接写端口,实际环境也是需要指定要邦定的IP才可以. 因为对于服务器来说 ...