javascript - 具有或不具有全局变量的 Angular.js 组织

Question

我正在开发一个 Angular 应用程序，并且知道有几种方法可以构建它。

首先是创建一个全局命名空间，例如:

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

然后，例如对于 Controller ，我会这样做:

App.controller('HomeController', ['$scope', function($scope) {

}]);

另一种方法(据我所知)是模块化我的 Controller ，例如:

angular.module('App', ['home']);

angular.module('home').controller('HomeController', ['$scope', function($scope) {

}]);

另一种方法，如下所示:

angular.module('App'), ['App.controllers']);

angular.module('App.controllers').controller('HomeController', ['$scope', function($scope) {

}]);

这些是否有任何好处，或者是否有在 Angular 社区中采用的最佳实践或通用风格？

谢谢!

Answer 1

因此，在处理了几个我使用 AngularJS 的大型项目后，我想到了以下几点:

1. 就最终结果而言，您概述的三种方法之间没有区别
2. 注意 2 和 3，您可能会遇到 AngularJS 提示您没有名为“home”的模块的错误。事实证明，调用 angular.module('home') 告诉 AngularJS 查找一个名为 home 的模块，该模块已经创建。调用 angular.module('home', []) 告诉它创建一个名为 home 的新模块。细微但主要的区别。

也就是说，如果您正在考虑开发要在您构建的所有应用程序中重用的组件，我强烈建议您采用后一种方法。举例来说，你正在构建一些网络应用程序，并且你已经开发了自己的 UI 组件，如日期选择器、轮播等。现在，由于你不想一次又一次地编写它们，那么你可以将它们放在一个模块中(说“Common.components”)。

然后，您可以只导出 JS 文件作为一个库，您可以将其包含在您的所有项目中，而无需复制粘贴代码，或从您的巨型应用程序的内部提取它。

这为您提供了很好的模块化、可重复使用的部分，可以在各种应用程序中很好地发挥作用。