深入angular.js依赖注入
2016-03-18 09:03
483 查看
angular.js是实现了依赖注入的前端框架,通常这个概念出现在spring类似的后端框架中。angular.js对依赖注入的实现思路是:定义和动态地注入依赖对象到另一个对象中,使注入对象中可使用所有依赖注入对象提供的功能。
有人将这种实现区分为提供者和注入器:
1)提供者,本质上是angular.js模块的一部分,模块使用注入器注册提供者,提供者实际上是包含了所有注入者提供的必须功能对象的实例。
2)注入器,作为一种服务负责监控提供者对象的实例。为每一个使用提供者的模块提供一个注入器服务实例,提供者对象收到依赖请求时,注入器服务即返回目标实例。
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta charset='utf-8'> <title>3</title> </head> <body> <div ng-controller='CtrlA'> <h3>Message from myApp:</h3> {{message}} </div><hr> <div ng-controller='CtrlB'> <h3>Message from module:</h3> {{message}} </div> <script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script> <script> var mod = angular.module('myMod',[]); mod.value('msgA','Message from a module'); mod.controller('CtrlB',['$scope','msgA',function($scope,msg){ $scope.message = msg; }]); var myApp = angular.module('myApp',['myMod']); myApp.value('msgB','Message from app bases module'); //msgA,msgB available here. myApp.controller("CtrlA",['$scope','msgB',function($scope,msg){ $scope.message = msg; }]) </script> </body> </html>
以上示例实现了自定义提供者,首先将myMod模块注入到myApp模块中,并且每一个模块都存在值提供者。这种注入会使myApp模块同时具有CtrlA和CtrlB控制器的功能,因此在该模块中可以同时使用自定义值提供者和另一模块的值提供者。
相关文章推荐
- Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题
- angularjs MVC、模块化、依赖注入详解
- 深入理解Angular中的依赖注入
- AngularJS $injector 依赖注入详解
- 深入理解Angular依赖注入
- 用原生js简单模仿angular的依赖注入
- AngularJS ng依赖注入的三种方式
- Angular.JS学习之依赖注入$injector详析
- 在Angular.js使用组合+依赖注入而不是继承
- AngularJS $injector 依赖注入
- angular 依赖注入factory
- Spring4深入理解01----Bean配置(依赖注入和控制反转的区别)
- angular-scope依赖关键字注入-解决办法
- 【SSH进阶之路】Spring的IOC逐层深入——依赖注入的两种实现类型(四)
- 【Angular】——依赖注入
- Angular 4 依赖注入教程之一 依赖注入简介
- 深入理解net core中的依赖注入、Singleton、Scoped、Transient(一)
- 如何用js 实现依赖注入的思想,后端框架思想搬到前端来
- Angular 4依赖注入学习教程之ClassProvider的使用(三)
- Struts2容器之Container与ContainerImpl深入剖析及其Struts2依赖注入的原理剖析