如何在 AngularJS 及其包含结构中获得真正的模块化应用程序？答案

【问题标题】：How to get a true modular app in AngularJS and their include structure?如何在 AngularJS 及其包含结构中获得真正的模块化应用程序？
【发布时间】：2017-02-17 15:49:59
【问题描述】：

我一直在搞乱 Angular，我想根据它们在我的应用程序中的角色来拆分所有文件。

我想要为每个“页面”创建一个文件夹，例如 /home 或 /products，并处理它们各自文件夹中的所有内容（这听起来是个好主意）。

但是，现在我不确定如何将这些文件加载到甚至在哪里加载。

这是我当前的文件结构：

由于某些限制，我无法使用其他有用的工具，这需要直接在代码中进行。

解决这个问题的最佳方法是什么？

【问题讨论】：

您很可能希望某种任务运行器（例如 Grunt）将所有源文件合并到 index.html 中所需的单个文件中
使用 gulp 或 grunt 任务管理器

标签： angularjs get include modularity file-structure

【解决方案1】：

您问题的第一部分：

没有默认方式来组织您的 Angular 应用程序。

但是，有一些准则。我一直感谢自己阅读Angular 1 app-structuring-guidelines by John Pappa，它启发了我对您提出的相同问题的启发。

目前，我已将我的所有应用程序组织在按功能分类的方法中，而不是按类型分类的方法（即，控制器文件夹中的所有控制器、服务文件夹中的所有服务等）。

您问题的第二部分：只需使用 Gulp 或 Grunt，然后将单个文件导入索引中

【讨论】：

Todd Motto's Angular 1.6 with ES2015 是构建基于组件的 Angular Web 应用程序的另一个好资源。
完全同意你的观点，不打算只支持一个人。 Todd Motto 的指南也很棒
别担心，我也使用过十几次 John Papa 的样式指南，但都提出了不同的方法

【解决方案2】：

Web 越来越面向组件，现在所有最著名的前端框架都采用可重用组件策略（React 和 Angular 2 严重依赖它）

如果您希望您的 Angular 应用程序尽可能模块化，您必须将有关组件的所有内容放在单独的文件夹中（html 模板、css 样式和 js 逻辑），并在服务和资产之间拆分共享逻辑

在您的情况下，项目结构的示例可能是：

应用程序/

资产/ //把图片、字体和共享样式放在这里
服务/
- apiService.js
- utilsService.js
- 等等等等……
组件
- 首页/
  - home.js
  - home.css
  - home.html
- 产品/
  - products.js
  - products.css
  - products.html
- 等等等等/...
- index.js

index.html

【讨论】：