11

我在使用 Angularjs 时遇到了不同的编码风格，这让我想到了每种编码风格的优缺点。

例如。声明控制器：

风格#1

angular.module('mainCtrl', []);
function MainCrl($scope, $rootScope) {}

风格#2

angular.module('mainCtrl',[])
.controller('MainCtrl', function($scope, $rootScope)) { ... });

风格#3

angular.module('mainCtrl',[])
.controller('MainCtrl', ['$scope', '$rootScope', function(scope, rootScope)) { ... }]);

因此，样式#3 有点像使用别名，当您要编写测试脚本（单元测试）时，使用别名是否有影响？我只是想在使用 Angularjs 框架时有一个更好的理解和正确的方法。

请分享您对此的看法。谢谢！

4

2 回答 2

14

样式 #1 意味着控制器在模块外部定义为全局变量，对于小型测试项目来说还可以，但对于任何严肃的工作，一切都应该使用 #2 或 #3 完成。#2 和 #3 之间的区别是 #3 可以缩小，因为 #2 中的 $scope 和 $rootScope 名称通常会被优化掉，这会导致应用程序失败。#3 将这些存储为不会被缩小的字符串。

如果至少有可能缩小代码，请选择#3。在#2 上使用#1 没有什么意义，所以我倾向于完全避免#1。

于 2013-09-11T06:40:54.663 回答
0

它们都是有效的，但是公开全局函数通常不是一个好主意（名称可能会发生冲突），因此最好将函数封装在 Angular 自己的域中。

这使得风格#2。

AngularJS 用于dependency injection提供其他服务、过滤器、控制器等。这是通过查看函数参数、通过正则表达式获取它们并在必要时提供它们来完成的。

但是，当你缩小时会发生什么？为了摆脱多余的字节，缩小器重命名函数中的变量和参数，因为它不会改变任何东西，如果我们不偷看获取函数的参数，一切都会正常工作。

当缩小时，例如$rootScope变成a，它会抛出一个错误，就像没有一样aProvider，是的，这是正确的。

所以，angular 有另一种语法，它是数组表示法；您可以定义一个数组，而不是定义一个函数，该数组具有依赖项名称，后跟实现函数。

所以，

angular.controller("MainCtrl", ["$scope", "$routeParams", function (a,b) {
    // a == $scope
    // b == $routeParams
}]);

还有其他方法可以做到这一点，而不是定义一个数组。您可以将函数的 $inject 属性设置为数组。

function MainCtrl(a,b) {
    // a == $scope
    // b == $routeParams        
}
MainCtrl.$inject = ["$scope", "$routeParams"];

欲了解更多信息：http ://docs.angularjs.org/guide/di

于 2013-09-11T06:44:12.063 回答