详解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文件的小脚本
Jun 28 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
javascript显示动态时间的方法汇总
Jul 06 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
[JS]点出统计器
2020/10/11 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
python3.0 字典key排序
2008/12/24 Python
Python的面向对象思想分析
2015/01/14 Python
python实现2048小游戏
2015/03/30 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
结对共建协议书
2014/08/20 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书