AngularJS学习第二篇 AngularJS依赖注入


Posted in Javascript onFebruary 13, 2017

简介:

首先我们需要理解什么是依赖注入?
控制反转和依赖注入有什么区别?

假定:应用程序A,需要访问外部资源C。这里使用了容器B(是指用来实现 IOC/DI 功能的一个框架程序)。
A需要访问C
B获取C然后返回给A
IOC inversion of control 控制反转:站在容器角度。B控制A,由B反向的向A注入C。即容器控制应用程序,由容器反向的向应用程序注入应用程序所需要的外部资源。
DI Dependency Injection 依赖注入:站在应用程序的角度。A依赖B获取C,B将C注入A。即应用程序依赖容器创建并注入它所需要的外部资源。

AngularJS依赖注入

Provider服务($provide)

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入:

value
factory
service
provider
constant
decorator (打酱油)

Constant

定义常量用的,这货定义的值当然就不能被改变,它可以被注入到任何地方,但是不能被装饰器(decorator)装饰

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.constant('movieTitle', 'The Matrix');
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 语法糖:
app.constant('movieTitle', 'The Matrix');

Value

这货可以是string,number甚至function,它和constant的不同之处在于,它可以被修改,不能被注入到config中,但是它可以被decorator装饰

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});
app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
});
// 语法糖:
app.value('movieTitle', 'The Matrix');

Service

它是一个可注入的构造器,在AngularJS中它是单例的,用它在Controller中通信或者共享数据都很合适。

var app = angular.module('app' ,[]);
app.config(function ($provide) {
 $provide.service('movie', function () {
  this.title = 'The Matrix';
 });
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 语法糖:
app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory

它是一个可注入的function,它和service的区别就是:factory是普通function,而service是一个构造器(constructor),这样Angular在调用service时会用new关键字,而调用factory时只是调用普通的function,所以factory可以返回任何东西,而service可以不返回(可查阅new关键字的作用)。

var app = angular.module('app', []);
app.config(function ($provide) {
 $provide.factory('movie', function () {
  return {
   title: 'The Matrix';
  }
 });
}); 
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});
// 语法糖
app.factory('movie', function () {
 return {
  title: 'The Matrix';
 }
});

Provider

provider是他们的老大,上面的几乎(除了constant)都是provider的封装,provider必须有一个$get方法,当然也可以说provider是一个可配置的factory。

var app = angular.module('app', []);
app.provider('movie', function () {
 var version;
 return {
  setVersion: function (value) {
   version = value;
  },
  $get: function () {
   return {
     title: 'The Matrix' + ' ' + version
   }
  }
 }
});
app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});
app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

Decorator

这个比较特殊,它不是provider,它是用来装饰其他provider的,而前面也说过,他不能装饰Constant,因为实际上Constant不是通过provider()方法创建的。

var app = angular.module('app', []);
app.value('movieTitle', 'The Matrix');
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
  return $delegate + ' - starring Keanu Reeves';
 });
});
app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

总结:

所有的供应商都只被实例化一次,也就说他们都是单例的
除了constant,所有的供应商都可以被装饰器(decorator)装饰
value就是一个简单的可注入的值
service是一个可注入的构造器
factory是一个可注入的方法
decorator可以修改或封装其他的供应商,当然除了constant
provider是一个可配置的factory

上述来源:(AngularJS中的Provider们:Service和Factory等的区别)https://segmentfault.com/a/1190000003096933

注入器($injector)

注入器负责从我们通过 provide 创建的服务中创建注入的实例。只要你编写了一个带有可注入性的参数,你都能看到注入器是如何运行的。每一个 AngularJS 应用都有唯一一个 injector,当应用启动的时候它被创造出来,你可以通过将 injector 注入到任何可注入函数中来得到它($injector 知道如何注入它自己!)。
一旦你拥有了 injector,你可以动过调用 get 函数来获得任何一个已经被定义过的服务的实例。

var movie = $injector.get('movie');
expect(movie.title).toEqual('The Matrix Reloaded');

注入器同样也负责将服务注入到函数中;例如,你可以魔法般的将服务注入到任何函数中,只要你使用了注入器的 invoke 方法:

var myFunction = function(movie) {
 return movie.title;
};
$injector.invoke(myFunction);

如果注入器只是创建一个服务的实例一次的话,那么它也没什么了不起的。它的厉害之处在于,他能够通过服务名称缓存从一个 provider 中返回的任何东西,当你下一次再使用这个服务时,你将会得到同一个对象。
因此,你可以通过调用 injector.invike 将服务注入到任何函数中也是合情合理的了。包括:

  • 控制器定义函数
  • 指令定义函数
  • 过滤器定义函数
  • provider中的$get方法(也就是factory函数)

由于constant和value总是返回一个静态值,它们不会通过注入器被调用,因此你不能在其中注入任何东西。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 #Javascript
如何用js判断dom是否有存在某class的值
Feb 13 #Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 #Javascript
详解Javascript中DOM的范围
Feb 13 #Javascript
JS简单判断函数是否存在的方法
Feb 13 #Javascript
浅谈js中的变量名和函数名重名
Feb 13 #Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 #Javascript
You might like
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
javascript正则表达式总结
2016/02/29 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
js编写简易的计算器
2020/07/29 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
python实现log日志的示例代码
2018/04/28 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python list格式数据excel导出方法
2018/10/31 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
程序员机试试题汇总
2012/03/07 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
2014年食堂工作总结
2014/11/20 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
干部考核工作总结2015
2015/07/24 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
z-index不起作用
2021/03/31 HTML / CSS