Angular中两种模块注入方式的区别

IT小君 2023-05-12T00:31:55

这两种在AngularJS中加载模块的方式有什么区别：

var app = angular.module('app', ['ngRoute']);

// 版本1

app.controller('HomeCtrl', ['$scope', '$dep1', '$dep2', function($scope, $dep1, $dep2) {
    // 控制器代码
}];

// 版本2

function HomeCtrl($scope, $dep1, $dep2){
    // 控制器代码
}
HomeCtrl.$inject=['$scope', '$dep1', '$dep2'];
return HomeCtrl;

// 然后将控制器加载到应用程序模块中
app.controller('HomeCtrl', HomeCtrl);

IT小君

两种方法都是用于最小化安全的依赖注入。这里是源代码的摘要，injector.js文件：

if (typeof fn === 'function') {
    if (!($inject = fn.$inject)) {
        $inject = [];

        //将函数转换为字符串，解析参数

        fn.$inject = $inject;
    }
} else if (isArray(fn)) {
    last = fn.length - 1;
    assertArgFn(fn[last], 'fn');
    $inject = fn.slice(0, last);
} else {
    assertArgFn(fn, 'fn', true);
}
return $inject;

上面的代码非常清楚地解释了，当您要注入依赖项的函数的类型为

function

Angular会检查这个函数是否有属性$inject，如果有，这里是要注入的服务的结果数组。

array

Angular会从这个数组中取出值，留下最后一个元素，这应该是要将值注入的实际函数。

请注意，我标注为注释//将函数转换为字符串，解析参数的部分。如果没有配置$inject属性并且提供的控制器/服务等实际上是函数类型，则Angular将获取函数的字符串表示形式并解析其接受的参数。然后获得的参数数组将用作要注入的服务。

因此，您可以看到差异非常小。

2023-05-12T00:32:39 回复