详解Angularjs中的依赖注入

 更新时间:2016年03月11日 14:04:40   作者:彼岸花在开  
这篇文章主要为大家详细介绍了Angularjs中的依赖注入,AngularJS提供了一个至高无上的依赖注入机制,感兴趣的小伙伴们可以参考一下

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

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

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

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依赖注入有所帮助。

相关文章

  • AngularJS 单元测试(一)详解

    AngularJS 单元测试(一)详解

    这篇文章主要介绍了AngularJS 单元测试(一)详解的相关资料,需要的朋友可以参考下
    2016-09-09
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下
    2016-03-03
  • AngularJS的依赖注入实例分析(使用module和injector)

    AngularJS的依赖注入实例分析(使用module和injector)

    这篇文章主要介绍了AngularJS的依赖注入,结合实例形式分析了依赖注入的原理及使用module和injector实现依赖注入的步骤与操作技巧,需要的朋友可以参考下
    2017-01-01
  • angularjs实现搜索的关键字在正文中高亮出来

    angularjs实现搜索的关键字在正文中高亮出来

    这篇文章主要介绍了angularjs实现搜索的关键字在正文中高亮出来,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • AngularJS的ng Http Request与response格式转换方法

    AngularJS的ng Http Request与response格式转换方法

    这篇文章主要介绍了AngularJS的ng Http Request与response格式转换方法,结合实例形式分析了AngularJS实现Request与response格式转换操作的相关设置与使用技巧,需要的朋友可以参考下
    2016-11-11
  • angularJS中router的使用指南

    angularJS中router的使用指南

    这篇文章主要介绍了angularJS中router的使用方法和示例分享,需要的朋友可以参考下
    2015-02-02
  • AngularJS用户选择器指令实例分析

    AngularJS用户选择器指令实例分析

    这篇文章主要介绍了AngularJS用户选择器指令,结合实例形式分析了angular指令实现选择器功能的具体操作步骤与相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • AngularJS的ng-click传参的方法

    AngularJS的ng-click传参的方法

    本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS中$http使用的简单介绍

    AngularJS中$http使用的简单介绍

    在AngularJS中主要使用$http服务与远程http服务器交互,本篇文章主要介绍了AngularJS中$http使用的简单介绍,非常具有实用价值,需要的朋友可以参考下。
    2017-03-03
  • AngularJS实现树形结构(ztree)菜单示例代码

    AngularJS实现树形结构(ztree)菜单示例代码

    这篇文章运用示例代码给大家详细介绍了利用AngularJS如何实现树形结构(ztree)菜单,文中仅用了几行AngularJS代码就是了这个功能,对大家日常开发很有帮助,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09

最新评论