详解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 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
详解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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python如何存储数据到json文件
2020/03/09 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
为什么group by 和order by会使查询变慢
2014/05/16 面试题
介绍一下write命令
2012/09/24 面试题
医学生实习自我鉴定
2013/09/27 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
委托公证书格式
2015/01/26 职场文书
辩护意见书
2015/06/04 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
bose降噪耳机音能消除人声吗
2022/04/19 数码科技