详解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 Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JS 数字转换研究总结
Dec 26 Javascript
js charAt的使用示例
Feb 18 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
js实现AI五子棋人机大战
May 28 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
详解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中处理模拟rewrite 效果
2006/12/09 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
python将字母转化为数字实例方法
2019/10/04 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
服装设计师职业生涯规划范文
2014/02/28 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
《叶问2》观后感
2015/06/15 职场文书
小学记事作文之200字
2019/08/06 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS