详解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并自然而然地把对它的引用传递进去: Hello 而在内部,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 依赖注入详解和简单实例 AngularJS之依赖注入模拟实现 AngularJS 依赖注入详解及示例代码 自学实现angularjs依赖注入 Angular 4依赖注入学习教程之简介(一) AngularJS学习第二篇 AngularJS依赖注入 AngularJS应用开发思维之依赖注入3 深入理解Angular中的依赖注入 js Angularjs 依赖注入 相关文章 详解Angular中的自定义服务Service、Provider以及Factory 本篇文章主要介绍了详解Angular中的自定义服务Service、Provider以及Factory,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-04-04 angular inputNumber指令输入框只能输入数字的实现 这篇文章主要介绍了angular inputNumber指令输入框只能输入数字的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-12-12 angularjs实现时间轴效果的示例代码 本篇文章主要介绍了angularjs实现时间轴效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 Angularjs之filter过滤器(推荐) 这篇文章主要介绍了Angularjs之filter过滤器的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2016-11-11 AngularJS入门教程二:在路由中传递参数的方法分析 这篇文章主要介绍了AngularJS在路由中传递参数的方法,结合实例形式分析了AngularJS实现路由中传递参数的相关技巧,并总结了相关操作步骤与注意事项,需要的朋友可以参考下 2017-05-05 Angular6使用forRoot() 注册单一实例服务问题 这篇文章主要介绍了Angular6使用forRoot() 注册单一实例服务问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 angularjs定时任务的设置与清除示例 本篇文章主要介绍了angularjs定时任务的设置与清除示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 Angular2使用Augury来调试Angular2程序 这篇文章主要介绍了Angular2使用Augury来调试Angular2程序,非常具有实用价值,需要的朋友可以参考下 2017-05-05 Angular6 正则表达式允许输入部分中文字符 这篇文章主要介绍了Angular6 正则表达式允许输入部分中文字符的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-09-09 Angualrjs和bootstrap相结合实现数据表格table 这篇文章主要介绍了Angualrjs和bootstrap相结合实现数据表格table,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-03-03 最新评论

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

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

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

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 依赖注入详解和简单实例
  • AngularJS之依赖注入模拟实现
  • AngularJS 依赖注入详解及示例代码
  • 自学实现angularjs依赖注入
  • Angular 4依赖注入学习教程之简介(一)
  • AngularJS学习第二篇 AngularJS依赖注入
  • AngularJS应用开发思维之依赖注入3
  • 深入理解Angular中的依赖注入
张贴在3