详解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
Nov 25 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PDO::getAttribute讲解
2019/01/28 PHP
YII框架关联查询操作示例
2019/04/29 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JS中操作JSON总结
2020/12/06 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript折半查找详解
2015/01/26 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python 切片和range()用法说明
2013/03/24 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Django Highcharts制作图表
2016/08/27 Python
Python 获取项目根路径的代码
2019/09/27 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
买房子个人收入证明
2014/01/16 职场文书
协议书模板
2014/04/23 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
班级体育活动总结
2014/07/05 职场文书
质量整改通知单
2015/04/21 职场文书
企业催款函范本
2015/06/24 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android