详解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 相关文章推荐
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
详解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
动态生成gif格式的图像要注意?
2006/10/09 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
详解jQuery事件
2017/01/13 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
党员批评与自我批评
2014/02/12 职场文书
市场总经理岗位职责
2014/04/11 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
教师个人教学总结
2015/02/11 职场文书
岗位聘任协议书
2015/09/21 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS