本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章和大家一起了解一下Angular依赖注入对象$injector。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
$injector其实是一个IOC容器,包含了很多我们通过.module()和$provide创建的模块和服务。$injector服务提供了对依赖注入器对象的访问,当然我们也可以调用angular.injector()来获得注入器。【相关推荐:《angular教程》】
1 | var injector1 = angular.injector([ "myModule" , "herModule" ]);
|
angular.injector()可以调用多次,每次都返回新建的injector对象,所以我们自己创建的myInjector和angular自动创建的$injector不是同一个对象。
1 2 3 4 | var injector1 = angular.injector([ "myModule" , "herModule" ]);
var injector2 = angular.injector([ "myModule" , "herModule" ]);
alert(injector1 == injector2);
|
$injector常用的方法
通过$injector.get('serviceName')根据名字获得服务的实例,通过$injector.annotate('xxx')获得xxx的所有依赖项。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var app = angular.module( "myApp" ,[]);
app.factory( "hello1" , function (){
return {
hello: function (){
console.log( "hello1 service" );
}
}
});
app.factory( "hello2" , function (){
return {
hello: function (){
console.log( "hello2 service" );
}
}
});
var $injector = angular.injector([ 'myApp' ]);
console.log(angular.equals($injector.get( '$injector' ),$injector));
var myCtrl2 = function ($scope,hello1,hello2){
$scope.hello = function (){
hello1.hello();
hello2.hello();
}
}
myCtrl2.$injector = [ 'hello1' , 'hello2' ];
app.controller( "myCtrl2" , myCtrl2);
console.log($injector.annotate(myCtrl2));
|
angular中三种声明依赖的方式
在我们使用.controller()函数的时候,会调用$controller服务,而在底层,则将使用$injector服务的invoke()函数创建该控制器,函数invoke()将负责分析什么参数需要被传入controller中,并执行该函数,所以底层实际上是使用了以下三种方式声明依赖。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var myModule = angular.module( 'myModule' , []);
myModule.service( 'myService' , function () {
this .my = 0;
});
var injector = angular.injector([ "myModule" ]);
injector.invoke( function (myService){alert(myService.my);});
function explicit(serviceA) {alert(serviceA.my);};
explicit.$inject = [ 'myService' ];
injector.invoke(explicit);
injector.invoke([ 'myService' , function (serviceA){alert(serviceA.my);}]);
|
$scope对象
因为$scope是局部的,不是一个服务,所以Angular使用它的方式和服务的方式不同,为了正确注入$scope变量,下面是一个理论上实践:
1 2 3 4 5 | $injector.invoke( function ($scope, $http) {
},
null ,
{$scope: {}});
|
$rootScope对象
$rootScope是由angularJS加载模块的时候自动创建的,每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ")能够获取到某个模块的根作用域。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | var module = angular.module( "app" ,[]);
var hasNgInjector = angular.injector([ 'app' , 'ng' ]);
console.log( "has $rootScope=" + hasNgInjector.has( "$rootScope" ));
var noNgInjector = angular.injector([ 'app' ]);
console.log( "no $rootScope=" + noNgInjector.has( "$rootScope" ));
var ngInjector = angular.injector([ 'ng' ]);
console.log( "ng $rootScope=" + ngInjector.has( "$rootScope" ));
|
更多编程相关知识,请访问:编程视频!!
以上就是浅谈Angular中的$injector对象的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详解Angular中自定义创建指令的方法
浅谈Angular控制器通信的4种方式
浅析Angular路由中的懒加载、守卫、动态参数
浅谈Angular中插槽的用法
聊聊Angular中的单元测试
深入了解Angular中的pipe(管道)
浅谈Angular如何借助第三方组件和懒加载技术进行性能优化
浅谈Angular8兼容ie10+版本的方法
Angular material的使用详解
聊聊Angular指令中的prelink和postlink函数
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅谈Angular中的$injector对象