这篇文章是探索对于Angular开发者来说既熟悉又陌生的概念：依赖注入。

我们在定义控制器、服务(甚至是指令)的时候通常会依赖一些服务，例如下面这样：

//按照Angular的严格模式，希望我们这样写：
angular.module('app', []).controller('ctrl', ['$scop', $http', function($scope, $http) {
    ...
}])

//在非严格模式下也可以这样写减少代码量：
angular.module('app', []).controller('ctrl', function($scope, $http) {
    ...
})

https://cdn.bootcss.com/angular.js/1.3.20/angular.js]版本源码为例。

// 第3492行
// var STRIP_COMMENTS = /((//.*$)|(/*[sS]*?*/))/mg;
// fn为传入的定义函数，通过toString函数来获取它的源代码
// 这里的主要目的是去除函数源码中的注释
fnText = fn.toString().replace(STRIP_COMMENTS, '');

// var FN_ARGS = /^functions*[^(]*(s*([^)]*))/m;
// 将函数定义的头部取出来，舍弃函数体，得到 function abc(...) 这种形式
argDecl = fnText.match(FN_ARGS);

// var FN_ARG_SPLIT = /,/;
// 通过逗号分隔参数进行遍历，并将每个参数放入数组中
forEach(argDecl[1].split(FN_ARG_SPLIT), function(arg) {
    // var FN_ARG = /^s*(_?)(S+?)1s*$/;
    arg.replace(FN_ARG, function(all, underscore, name) {
        $inject.push(name);
    });
});

简而言之，这一部分代码流程也很简单：获取函数源码，取到函数头部，分割放入数组。

这样就获得了我们依赖注入所需要的参数名，这是针对前面所说的第二种情况，第一种情况则很简单，直接从数组中提取就行。

https://cdn.bootcss.com/angular.js/1.3.20/angular.js
参考文章：
《The "Magic" behind AngularJS Dependency Injection》

ITPub博客

Angular的依赖注入是怎么实现的？

最新文章