了解 Angularjs 中的编码风格答案

【问题标题】：Understanding coding style in Angularjs了解 Angularjs 中的编码风格
【发布时间】：2015-04-30 21:44:50
【问题描述】：

我在使用 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框架时有一个更好的理解和正确的方法。

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

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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

【讨论】：

这个答案几乎概括了它。
谢谢伙计。实际上我一直在使用的风格是#1。做了一些重构。 ^_^.
哦，顺便说一句，我的模块 mainCtrl 和我的控制器 MainCtrl 可以命名吗？注意模块名称的小写和控制器名称的小写？
技术上是的，但是您确实应该将模块命名为更高级别的名称，通常是您的项目名称。如果您可以将项目拆分为几个不同的模块，那么通常是"yourProject.subModule"。
#2 也可以使用 Grunt 任务 (grunt-ngmin) github.com/btford/grunt-ngmin 进行缩小

【解决方案2】：

它们都是有效的，但是暴露全局函数通常不是一个好主意（名称可能会发生冲突），因此最好将函数封装在 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

【讨论】：