详解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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js的逻辑运算符 ||
May 31 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
canvas 实现中国象棋
Feb 17 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 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修正代码
2011/05/09 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
一段实时更新的时间代码
2006/07/07 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
在pycharm中显示python画的图方法
2019/08/31 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
曼城官方网上商店:Manchester City
2019/09/10 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
幼儿园小班个人总结
2015/02/12 职场文书
四群教育工作总结
2015/08/10 职场文书
python实现简单的井字棋
2021/05/26 Python