详解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 19 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JS请求servlet功能示例
Jun 01 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
基于python的列表list和集合set操作
2019/11/24 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
存储过程的优点有哪些
2012/09/27 面试题
个人自我评价和职业目标
2014/01/24 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
主题班会演讲稿
2014/05/22 职场文书
爱国口号
2014/06/19 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
邀请函样本
2015/02/02 职场文书
Python实现排序方法常见的四种
2021/07/15 Python