• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 详解Angularjs中的依赖注入

详解Angularjs中的依赖注入

作者:彼岸花在开 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含详解Angularjs中的依赖注入等相关知识,彼岸花在开 希望在学习及工作中可以帮助到您

一个对象通常有三种方式可以获得对其依赖的控制权:

  • 在内部创建依赖;
  • 通过全局变量进行引用;
  • 在需要的地方通过参数进行传递

依赖注入是通过第三种方式实现的。比如:

function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
</div>

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!");
};
});
</div>

当AngularJS实例化这个模块时,会查找greeter并自然而然地把对它的引用传递进去:

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</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})
</div>

以上就是本文的全部内容,希望本文对大家学习Angularjs依赖注入有所帮助。

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30AngularJS中$http服务常用的应用及参数
  • 2017-05-30angularjs 处理多个异步请求方法汇总
  • 2017-05-30Angular.js如何从PHP读取后台数据
  • 2017-05-30Angularjs 实现分页功能及示例代码
  • 2017-05-30AngularJS中的过滤器使用详解
  • 2017-05-30angularjs自定义ng-model标签的属性
  • 2017-05-30AngularJS利用Controller完成URL跳转
  • 2017-05-30angularJS结合canvas画图例子
  • 2017-05-30Angular下H5上传图片的方法(可多张上传)
  • 2017-05-30AngularJS深入探讨scope,继承结构,事件系统和生命周期

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS入门教程之Cookies读写操作示例
    • Angularjs中使用指令绑定点击事件的方法
    • Angular学习笔记之angular的$filter服务浅析
    • Angular.JS内置服务$http对数据库的增删改使用教程
    • Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
    • 用AngularJS的指令实现tabs切换效果
    • Angularjs单选改为多选的开发过程及问题解析
    • Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
    • 利用CSS3在Angular中实现动画
    • Angularjs 实现一个幻灯片示例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有