首页 > angular.js是如何做到注入参数的

angular.js是如何做到注入参数的

像这种代码

app.controller('TestController', function ($scope, $rootScope) {
    ...
});

我只在函数里声明了这两个参数$scope$rootScope。在使用的时候,这两个参数就已经被框架注入实际的值了,它是怎么做到的?


这个地址应该更好访问。

对于 angular的依赖注入主要是主要是依靠的$injector服务,具体实现其实是 在angular 中 providerCache instanceCache 2个cache 初始化ng后providerCache 中放入各个基本服务,当服务被使用 后加入到instanceCache 中 以后直接到instanceCache中查找。 你可以去看angular源码的createInternalInjector 这个方法,了解一下大致的执行过程,你就明白了。当然我觉得原理也没必要非得特别明白,知道怎么用 就好了。


思路请参考Gemini的回答,我写了一个简单的实现,仅供参考:

var injectMap = {
    $scope: { foo: "bar" },
    $rootScope: { rootFoo: "rootBar" }
};

var controller = function(name, func) {
    if (typeof func == "function") {
        var funcString = func.toString(), funcArgs = [];
        if (/function\s*\((.*?)\)\s*{+/gi.test(funcString)) {
            var match = /function\s*\((.*?)\)\s*{+/gi.exec(funcString), argsDefine = match[1];
            if (argsDefine) {
                var args = argsDefine.split(",");
                for (var i = 0, j = args.length; i < j; i++) {
                    var arg = args[i].trim();
                    if (injectMap[arg]) {
                        funcArgs[i] = injectMap[arg];
                    }
                }
            }
        }
        func.apply(null, funcArgs);
    }
};

controller("TestController", function ($scope, $rootScope) {
    console.log($scope, $rootScope);
});

controller("TestController2", function () {
    console.log("No Arguments");
});

angular做DI的时候有个要求(当然,就是这种代码风格下的,不是事先写好依赖的):不能压缩代码
从这条要求可以知道大致的思路如下(我没读过源码):
angular的回调函数拿到之后用toString()获取回调函数的源码,再用正则表达书提取出它的参数,然后根据参数名注入相应的对象。(这也可以解释为什么它的参数要求$开头的问题)


controller的参数是规定好的,官方文档中有

【热门文章】
【热门文章】