实习的时候用AngularJS比较多，写一篇学习笔记用来记录依赖注入的几种方式。
ng中的“依赖注入”是通过provider和injector实现的。
注入方式：
1、推断型注入：函数参数的名称必须要和被注入的对象相同
例子：
1
2
3
4
5
| var myModule = angular.module('MyModule',[]);
var MyCtrl = function($scope){
$scope.name = 'hello world';
}
myModule.controller('MyCtrl',MyCtrl);
|
AngularJS根据函数的签名，从中找到函数参数的名称，当调用这个函数的时候把参数注入。
注意点：函数的参数名称必须要和被注入的对象相同。
当js压缩时会出错。
2、声明式注入：
例子：
1
2
3
4
5
6
| var myModule = angular.module('MyModule',[]);
var MyCtrl = function(myName){
myName.name = 'hello world';
}
MyCtrl.$inject = ['$scope'];
myModule.controller('MyCtrl',MyCtrl);
|
3、内联式注入
例子：
1
2
3
4
| var myModule = angular.module('MyModule',[]);
myModule.controller('MyCtrl',['$scope',function($scope){
$scope.name = 'hello world';
}])
|
推荐使用内联式注入，不用担心js代码压缩出问题。
其他几个例子：
例子：
1
2
3
4
5
6
7
8
9
10
11
| var myModule = angular.module('MyModule',[]);
myModule.factory('game',function(){
return {
name: 'hello world';
}
});
myModule.controller('MyCtrl',['$scope','$injector',function($scope,$injector){
$injector.invoke(function(game){
console.log(game.name);
})
}])
|
在这个例子中MyCtrl依赖于服务person,但是它不声明依赖于person,而是通过注入器$injector来获得person的实例对象。通过注入器$injector的invoke方法，把服务person的实例注入到函数的funtion中。
在ng中，所有的provider都可以用来进行注入：
provider/factory/service/constant/value
以下类型的函数可以接受注入：
controller/directive/filter/service/factory等
provide的写法：
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.provider('HelloAngular',function(){
return {
$get: function(){
var name = 'hello world';
function getName(){
return name;
}
return{
getName: getName
}
}
}
});
myModule.controller('MyCtrl',['$scope','HelloAngular',
function($scope,helloAngular){
$scope.Name = helloAngular.getName();
}
])
|
factory的写法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var myModule = angular.module('MyModule',[]);
myModule.factory('HelloAngular',function(){
var name = 'hello world';
function getName(){
return name;
}
return {
getName:getName;
}
});
myModule.controller('MyCtrl',['$scope','HelloAngular',
function($scope,helloAngular){
$scope.Name = helloAngular.getName();
}
])
|
service的写法：
1
2
3
4
5
6
7
8
9
10
11
12
| var myModule = angular.module('MyModule',[]);
myModule.service('HelloAngular',function(){
this.name = 'hello world';
this.getName = function(){
return this.name;
}
});
myModule.controller('MyCtrl',['$scope','HelloAngular',
function($scope,helloAngular){
$scope.Name = helloAngular.getName();
}
])
|
总结：provide是基础，其余都是调用provider函数实现的。从provide开始灵活性越来越差。