为什么在 AngularJS 中定义控制器时不使用显式注释?
Why wouldn't you use explicit annotations when defining controllers in AngularJS?
我是 AngularJS 的新手,正在学习两种编写控制器函数的风格。似乎有人不使用显式注释的唯一原因是为了节省时间,这似乎不是一个好的理由。并且能够 minify/obfuscate 代码似乎是我希望在任何应用程序中保留的要求。
另请注意,我不是在问哪个更好,也不是在要求辩论。我在问什么原因(或在什么情况下)不使用显式注释会更有益。
我所说的示例:
module('myApp').controller('MyController', function($scope) {});
对比
module('myApp').controller('MyController', ['$scope', function($scope) {}]);
Obviously You need Array annotation of DI while doing JS minification,
If you don't want minification of JS files then you can continue
function pattern.
Refer this Article 这对你想要的东西有很好的解释。
如果您不想包含依赖注入的数组注释,那么您可以使用 ng-annotate 库。 (正如你所说,它的模式不错,认为你可以通过 ng-annotate
避免它)
在缩小 js 文件的同时将您的代码转换为 DI 的数组注释
只需要在声明 ng-app
指令的地方添加 ng-strict-di
属性。
<div ng-app="myApp" ng-strict-di>
Using direct arguments
当你向控制器函数传递参数时,在这种机制中,你将传递参数并且angular会识别
例如。
module('myApp').controller('MyController', function($scope) {});
module('myApp').controller('MyController', function($scope,$http) {});
OR
module('myApp').controller('MyController', function($http,$scope) {});
在第二个和第三个例子中,$scope和$http的位置不同,但是都没有报错。这意味着 angular 识别哪个是 $scope,哪个是 $http。
现在假设您开发了一个 Web 应用程序并且您将要部署它。在部署之前将缩小您的 javascript 代码以减小 js 文件的大小。
在缩小过程中,每个变量都会变短,就像 $scope 可能变成 a,并且 angular 无法识别 'a'.
Using array method
这是标准机制,当你传递一个数组时,数组元素是除最后一个元素之外的字符串,最后一个数组元素是你的控制器函数。
您必须需要将数组中每个参数的顺序指定为字符串,并且您可以在函数中传递该变量,在这里您可以提供任何变量名称,因为它们只是别名。
例如
module('myApp').controller('MyController', ['$scope',function($scope) {}]);
module('myApp').controller('MyController', ['$scope','$http',function(myscope,newhttp) {}]);
现在在这个机制中,如果你使用任何缩小器来缩小这个 js,它会缩小并将 myscope 更改为任何其他名称,比如 'b',但它不会触及 $scope,因为它是一个字符串,你不必担心,因为 b 只是 $scope 的别名。
这是推荐的,但是如果你使用grunt/gulp进行缩小,你可以检查这些
我想如果您不希望任何人缩小您的应用程序代码,那么使用注释是有用且确实有必要的一种情况。
唯一真正的原因是模拟应用程序时速度更快。
这是早期 Angular 的遗留物,当时他们有一些用于 'showing off' 的功能,制作 Angular 应用程序是多么容易。另一个例子是 Angular 过去如何查找在 window
上全局声明的控制器;他们在 1.3 中删除了 'feature'。 This changelog 最能说明原因。
这是一个有趣的小技巧,它有助于新开发人员轻松进入 Angular 的世界,但没有充分的理由在生产应用程序中使用它。
inline array annotation 只是一个解决 Javascript 限制的变通方法,允许 Angular 代码被缩小而不停止工作。但这不是一个很好的解决方案,因为如果强制您 复制 您的代码。我们都知道重复代码有多糟糕。 Angular 文档本身承认:
When using this type of annotation, take care to keep the annotation
array in sync with the parameters in the function declaration.
很容易添加新的依赖而忘记添加相应的注解。或者重新排序参数而忘记更新注释列表。相信我。去过也做过。
幸运的是,聪明的人开发了一些工具,通过自动注释代码来减轻我们的负担。正如@pankajparkar 所提到的,可能最著名的是 ng-annotate。您所要做的就是将其插入您的构建过程,您的代码将被正确注释。
老实说,我觉得 Angular 文档建议不要采用这种方法真的很奇怪。
我是 AngularJS 的新手,正在学习两种编写控制器函数的风格。似乎有人不使用显式注释的唯一原因是为了节省时间,这似乎不是一个好的理由。并且能够 minify/obfuscate 代码似乎是我希望在任何应用程序中保留的要求。
另请注意,我不是在问哪个更好,也不是在要求辩论。我在问什么原因(或在什么情况下)不使用显式注释会更有益。
我所说的示例:
module('myApp').controller('MyController', function($scope) {});
对比
module('myApp').controller('MyController', ['$scope', function($scope) {}]);
Obviously You need Array annotation of DI while doing JS minification, If you don't want minification of JS files then you can continue function pattern.
Refer this Article 这对你想要的东西有很好的解释。
如果您不想包含依赖注入的数组注释,那么您可以使用 ng-annotate 库。 (正如你所说,它的模式不错,认为你可以通过 ng-annotate
避免它)
在缩小 js 文件的同时将您的代码转换为 DI 的数组注释
只需要在声明 ng-app
指令的地方添加 ng-strict-di
属性。
<div ng-app="myApp" ng-strict-di>
Using direct arguments
当你向控制器函数传递参数时,在这种机制中,你将传递参数并且angular会识别
例如。
module('myApp').controller('MyController', function($scope) {});
module('myApp').controller('MyController', function($scope,$http) {});
OR
module('myApp').controller('MyController', function($http,$scope) {});
在第二个和第三个例子中,$scope和$http的位置不同,但是都没有报错。这意味着 angular 识别哪个是 $scope,哪个是 $http。
现在假设您开发了一个 Web 应用程序并且您将要部署它。在部署之前将缩小您的 javascript 代码以减小 js 文件的大小。 在缩小过程中,每个变量都会变短,就像 $scope 可能变成 a,并且 angular 无法识别 'a'.
Using array method
这是标准机制,当你传递一个数组时,数组元素是除最后一个元素之外的字符串,最后一个数组元素是你的控制器函数。 您必须需要将数组中每个参数的顺序指定为字符串,并且您可以在函数中传递该变量,在这里您可以提供任何变量名称,因为它们只是别名。
例如
module('myApp').controller('MyController', ['$scope',function($scope) {}]);
module('myApp').controller('MyController', ['$scope','$http',function(myscope,newhttp) {}]);
现在在这个机制中,如果你使用任何缩小器来缩小这个 js,它会缩小并将 myscope 更改为任何其他名称,比如 'b',但它不会触及 $scope,因为它是一个字符串,你不必担心,因为 b 只是 $scope 的别名。
这是推荐的,但是如果你使用grunt/gulp进行缩小,你可以检查这些
我想如果您不希望任何人缩小您的应用程序代码,那么使用注释是有用且确实有必要的一种情况。
唯一真正的原因是模拟应用程序时速度更快。
这是早期 Angular 的遗留物,当时他们有一些用于 'showing off' 的功能,制作 Angular 应用程序是多么容易。另一个例子是 Angular 过去如何查找在 window
上全局声明的控制器;他们在 1.3 中删除了 'feature'。 This changelog 最能说明原因。
这是一个有趣的小技巧,它有助于新开发人员轻松进入 Angular 的世界,但没有充分的理由在生产应用程序中使用它。
inline array annotation 只是一个解决 Javascript 限制的变通方法,允许 Angular 代码被缩小而不停止工作。但这不是一个很好的解决方案,因为如果强制您 复制 您的代码。我们都知道重复代码有多糟糕。 Angular 文档本身承认:
When using this type of annotation, take care to keep the annotation array in sync with the parameters in the function declaration.
很容易添加新的依赖而忘记添加相应的注解。或者重新排序参数而忘记更新注释列表。相信我。去过也做过。
幸运的是,聪明的人开发了一些工具,通过自动注释代码来减轻我们的负担。正如@pankajparkar 所提到的,可能最著名的是 ng-annotate。您所要做的就是将其插入您的构建过程,您的代码将被正确注释。
老实说,我觉得 Angular 文档建议不要采用这种方法真的很奇怪。