我是Angular开发的初学者。我不知道为什么我们为控制器注入两次参数:
app.controller('mycontroller', ['$scope', 'myFactory', 'Myothers', function ($scope, myFactory, Myothers) {}])
并查看
app.controller('mycontroller', function ($scope, myFactory, Myothers) {})
你能解释我们为什么要这样做吗?
答案 0 :(得分:6)
原因是保护代码免受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
。
答案 1 :(得分:3)
首先,您可以不使用数组:
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) {}])
答案 2 :(得分:2)
当我们将依赖项作为 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
安全。