Question

我是Angular开发的初学者。我不知道为什么我们为控制器注入两次参数：

app.controller('mycontroller', ['$scope', 'myFactory', 'Myothers', function ($scope, myFactory, Myothers) {}])

并查看

app.controller('mycontroller', function ($scope, myFactory, Myothers) {})

你能解释我们为什么要这样做吗？

Answer 1

原因是保护代码免受javascript缩小。

$inject确保以字符串的形式保留变量名称。

理想情况下，您的应用代码应如下所示：

 var app = angular.module('YourApp', []);
 var appCtrl = app.controller('AppCtrl', AppCtrl);

 appCtrl.$inject = ['dep1', 'dep2']; //add all the dependencies

 function AppCtrl (dep1,dep2){  //add the name of the dependencies here too
    //your controller logic
 }

在缩小期间，javascript会使用自定义名称替换变量名称，因此dep1可能会被d替换，因此会导致错误。

但是$inject会让角知道依赖项的实际名称为dep1，因为它以string值的形式存储，可以防止缩小。

因此我们使用$inject。

Answer 2

首先，您可以不使用数组：

app.controller("myController",function($scope,myFactory,MyOrders){});

在数组中你声明了变量，你可以做类似的事情：

app.controller('mycontroller',['$scope', 'myFactory', 'Myothers', function (s, f, o) {}])

s作为范围，f作为myfactory，o作为顺序;

这是您的选择如何使用，但在角度教程中他们说正确的方法是：

app.controller('mycontroller',['$scope', 'myFactory', 'Myothers', function (s, f, o) {}])

Answer 3

当我们将依赖项作为 Array 参数传递时，当我们 minify 应用程序时，应用程序不会中断生产。

如何做到这一点：

使用命名功能
使用内联匿名功能

使用命名功能：

我们可以将依赖关系作为Array Arguments传递给命名函数。

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

function MyCtrl($scope) {

    $scope.name = "Rohit";

};

app.controller('MyCtrl', ['$scope', MyCtrl]);

使用内联匿名函数：

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

app.controller('MyCtrl', ['$scope', function ($scope) {

    $scope.name = "Rohit";

}]);

差异：

不同之处在于，当app.controller('mycontroller', function ($scope, myFactory, Myothers) {})缩小时，参数名称将缩小，并且angular将无法确定要注入的依赖项。带有字符串依赖关系的array语法意味着minification安全。

替代解决方案：

我们可以使用ng-annotate库，将app.controller('mycontroller', function ($scope, myFactory, Myothers) {})更改为app.controller('mycontroller', ['$scope', 'myFactory', 'Myothers', function ($scope, myFactory, Myothers) {}])，以便代码再次minification安全。

为什么我们在数组和函数中注入参数

3 个答案: