您的位置：首页 > Web前端 > AngularJS

AngularJS API之$injector ---- 依赖注入

2016-01-18 17:23 597 查看
阅读目录

推断式注入

标记式注入

内联式注入

$injector常用的方法

样例代码


在AngularJS中也有依赖注入的概念，像spring中的依赖注入，但是又有所不同。Spring中使用构造注入或者设值注入的方式，还需要做一些额外的操作，但是angular中只需要在需要的地方声明一下即可，类似模块的引用，因此十分方便。
参考：[angularapidoc](http://docs.angularjs.cn/api/auto/service/$injector)


回到顶部

推断式注入

这种注入方式，需要在保证参数名称与服务名称相同。如果代码要经过压缩等操作，就会导致注入失败。

app.controller("myCtrl1",function($scope,hello1,hello2){
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
});


回到顶部

标记式注入

这种注入方式，需要设置一个依赖数组，数组内是依赖的服务名字，在函数参数中，可以随意设置参数名称，但是必须保证顺序的一致性。

varmyCtrl2=function($scope,hello1,hello2){
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
}
myCtrl2.$injector=['hello1','hello2'];
app.controller("myCtrl2",myCtrl2);


回到顶部

内联式注入

这种注入方式直接传入两个参数，一个是名字，另一个是一个数组。这个数组的最后一个参数是真正的方法体，其他的都是依赖的目标，但是要保证与方法体的参数顺序一致（与标记注入一样）。

app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
}]);


回到顶部

$injector常用的方法

在angular中，可以通过
angular.injector()
获得注入器。

var$injector=angular.injector();


通过
$injector.get('serviceName')
获得依赖的服务名字

$injector.get('$scope')


通过
$injector.annotate('xxx')
获得xxx的所有依赖项

$injector.annotate(xxx)


回到顶部

样例代码

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<bodyng-app="myApp">
<divng-controller="myCtrl1">
<inputtype="button"ng-click="hello()"value="ctrl1"></input>
</div>
<divng-controller="myCtrl2">
<inputtype="button"ng-click="hello()"value="ctrl2"></input>
</div>
<divng-controller="myCtrl3">
<inputtype="button"ng-click="hello()"value="ctrl3"></input>
</div>
<scripttype="text/javascript">
varapp=angular.module("myApp",[]);
app.factory("hello1",function(){
return{
hello:function(){
console.log("hello1service");
}
}
});
app.factory("hello2",function(){
return{
hello:function(){
console.log("hello2service");
}
}
});

var$injector=angular.injector();
console.log(angular.equals($injector.get('$injector'),$injector));//true
console.log(angular.equals($injector.invoke(function($injector){return$injector;}),$injector));//true

//inferred
//$injector.invoke(function(serviceA){});
app.controller("myCtrl1",function($scope,hello1,hello2){
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
});

//annotated
//functionexplicit(serviceA){};
//explicit.$inject=['serviceA'];
//$injector.invoke(explicit);
varmyCtrl2=function($scope,hello1,hello2){
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
}
myCtrl2.$injector=['hello1','hello2'];
app.controller("myCtrl2",myCtrl2);

//inline
app.controller("myCtrl3",['$scope','hello1','hello2',function($scope,hello1,hello2){
//app.controller("myCtrl3",['$scope','hello1','hello2',function(a,b,c){
//a.hello=function(){
//b.hello();
//c.hello();
//}
$scope.hello=function(){
hello1.hello();
hello2.hello();
}
}]);

console.log($injector.annotate(myCtrl2));//["$scope","hello1","hello2"]
</script>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航