angular $inject原理
时间: 2023-08-03 18:09:44 浏览: 142
在 AngularJS 中,使用 $injector 服务来注入依赖项时,$injector 会根据依赖项的名称来查找相应的服务,并将服务的实例注入到需要注入依赖项的函数中。
在使用 $inject 属性来指定依赖项的名称时,$injector 会将 $inject 属性中指定的依赖项名称与需要注入依赖项的函数的参数列表进行匹配。如果匹配成功,则会将相应的服务实例注入到需要注入依赖项的函数中。
例如,以下代码定义了一个名为 myController 的控制器:
```javascript
angular.module('myModule', [])
.controller('myController', ['$scope', '$http', function($scope, $http) {
// 使用 $scope 和 $http 服务
}]);
```
在上面的代码中,$injector 会按照 $inject 属性中指定的依赖项名称来查找相应的服务实例,并将 $scope 和 $http 服务的实例注入到匿名函数中。
需要注意的是,$inject 属性中指定的依赖项的名称必须与需要注入依赖项的函数的参数名称一致,否则 $injector 就无法正确地将服务实例注入到函数中。
除了使用 $inject 属性来指定依赖项的名称之外,我们还可以使用函数的 toString() 方法来获取函数的源码,然后通过正则表达式来解析函数的参数列表,并将参数名称作为依赖项的名称进行注入。例如:
```javascript
angular.module('myModule', [])
.controller('myController', function($scope, $http) {
// 使用 $scope 和 $http 服务
});
// 解析函数参数列表的正则表达式
var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
// 获取函数的源码
var controllerSource = myModule._invokeQueue[0][2][1].toString();
// 通过正则表达式解析函数的参数列表
var matches = controllerSource.match(FN_ARGS);
var argNames = matches[1].split(',').map(function(argName) {
return argName.trim();
});
// 使用 $injector 服务手动注入依赖项
myModule.controller('myController', argNames.concat(function($scope, $http) {
// 使用 $scope 和 $http 服务
}));
```
在上面的代码中,我们通过获取 myController 控制器的源码,并使用正则表达式解析出参数列表中的参数名称,然后再手动调用 $injector 服务来注入依赖项。虽然这种方式比较繁琐,但是在某些情况下,比如需要动态地创建控制器时,可能会比较有用。
阅读全文