详解Angularjs中的依赖注入


Posted in Javascript onMarch 11, 2016

一个对象通常有三种方式可以获得对其依赖的控制权:

  • 在内部创建依赖;
  • 通过全局变量进行引用;
  • 在需要的地方通过参数进行传递

依赖注入是通过第三种方式实现的。比如:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};

SomeClass能够在运行时访问到内部的greeter,但它并不关心如何获得对greeter的引用。
为了获得对greeter实例的引用,SomeClass的创建者会负责构造其依赖关系并传递进去。

基于以上原因,AngularJS使用$injetor(注入器服务)来管理依赖关系的查询和实例化。
事实上,$injetor负责实例化AngularJS中所有的组件,包括应用的模块、指令和控制器等。

例如下面这段代码。这是一个简单的应用,声明了一个模块和一个控制器:

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});

当AngularJS实例化这个模块时,会查找greeter并自然而然地把对它的引用传递进去:

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>

而在内部,AngularJS的处理过程是下面这样的:

// 使用注入器加载应用
var injector = angular.injector(['ng', 'myApp']);
// 通过注入器加载$controller服务:var $controller = injector.get('$controller');
var scope = injector.get('$rootScope').$new();
// 加载控制器并传入一个作用域,同AngularJS在运行时做的一样
var MyController = $controller('MyController', {$scope: scope})

以上就是本文的全部内容,希望本文对大家学习Angularjs依赖注入有所帮助。

Javascript 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
详解AngularJS过滤器的使用
Mar 11 #Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 #Javascript
You might like
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP整合PayPal支付
2015/06/11 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python 私有化操作实例分析
2019/11/21 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
九年级历史教学反思
2014/01/27 职场文书
入党自荐书范文
2014/03/09 职场文书
工程售后服务承诺书
2014/05/21 职场文书
优秀班组申报材料
2014/12/25 职场文书
签证工作证明模板
2015/06/15 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android