AngularJS - 项目文件布局、注入和范围澄清

Question

我正在研究一些用于设置新项目的模式，我正在尝试了解哪些似乎是构建大型 Angular 项目的常见模式。

如果你看下面的结构，在每个文件中都有一个用 angular.module 容器声明的变量，用于添加控制器、指令等，它们作为依赖项注入到 app.js 文件中的应用程序（myApp）中.

虽然我看到了这种模式的非常简单的示例，但我不确定它是否会按照我在这里假设的方式进行扩展，或者我是否完全遗漏了某些东西并且这不是正确的方法搭建一个更大的项目。

例如，如果我为特定控制器创建一个单独的（第二个）文件，并在我当前的 controllers.js 文件之后加载它，我是否可以从“myControllers.controller('MyController...”开始定义附加的控制器，还是我需要创建一个新变量，分配 angular.module，将其注入应用程序等并将控制器添加到第二个文件中的新变量？

第一种方式（如果有效的话）是否意味着我的所有控制器都可以访问彼此的公共变量和方法，而后者将每个文件的控制器彼此隔离并要求我通过服务进行通信？

我是否应该简单地声明一个 var myApp - angular.module('myApp',[]);在 app.js 文件中，然后直接在所有其他文件中引用 myApp.controller、myApp.filter、myApp.factory 而不为每种类型创建新的特定变量？

我觉得我错过了一些可以让所有这些答案变得清晰的核心见解，但我目前没有。

我知道为每个功能块创建文件夹有偏好，每个功能块都有自己的控制器、服务等文件，我对此不感兴趣，我想正确理解这个结构。

谢谢， :史蒂夫

---

文件：app.js

var myApp = angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]);

文件：controllers.js

var myControllers = angular.module('myApp.controllers', []);

myControllers.controller('MyController', function MyController ($scope, $http...)

文件：directives.js

var myDirectives = angular.module('myApp.directives', []);

myDirectives.directive('MyDirective', function MyDirective ($scope, $http...)

文件：filters.js

var myFilters = angular.module('myApp.filters', []);

myFilters.filter('MyFilter', function MyFilter ($scope, $http...)

文件：services.js

var myServices = angular.module('myApp.services', []);

myServices.service('MyService', function MyService ($scope, $http...)
or
myServices.factory('MyFactory', function MyFactory ($scope, $http...)

Answer 1

虽然这种结构确实属于Google's style guidelines，但大多数较小的应用程序不会要求这种类型的严格性，尤其是在原型设计阶段。因此，将您的服务、指令和工厂挂在 app 之外应该没问题。

我是否应该简单地声明一个 var myApp - angular.module('myApp',[]);在 app.js 文件中，然后引用 myApp.controller、myApp.filter、myApp.factory 在所有其他文件中 直接不为每种类型创建新的特定变量？

如上所述，我敢打赌这里的一般答案是“是”。唯一需要修改 angular.module('myApp', ['someThirdPartyModule']) 声明的地方是第三方库。

但是...

最初不将您的服务、工厂、指令等构建为可重用组件然后将它们注入您的应用程序是有缺点的 - 主要是，您显然失去了拥有可重用组件的能力:-)

例如，假设您现在必须支持两个模块：

angular.module('myApp', []);
angular.module('myOtherApp', []);

如果我们此时没有可注入服务，则需要为 myApp 和 myOtherApp 的每个实例构建它们，如果它们都需要从服务器。如果是这种情况，为什么不构建一个通用的DataAccessService 可以在最高级别注入到两个模块中？

因此，为了结束循环，我看到的唯一好处是能够在多个不相关的应用程序中获得可重用性。似乎过滤器（即格式化程序）、数据服务和通用指令可以在这个级别完成，但对于仅对 myApp 和 myOtherApp 有意义的组件，似乎这些服务将附加到该应用程序。例如，myApp 有一个OrdersService，myOtherApp 有CustomerService，但两者都使用了在应用程序级别注入的DataAccessService。