AngularJS 项目结构

Question

作为 AngularJS 的新手，我真的很想得到帮助，以最好的方式来构建我正在从事的项目。

基本上，我有一个项目要在“PEAN”堆栈中执行（Postgres、Express、AngularJS、Node），并且需要一个关于如何构建它的概念性想法。

它的要点是应用程序将有 4 种类型的用户帐户，每个登录用户将看到不同的视图。这是功能集的简单图表：

用户类型 1：
导航
- 功能 1
- 功能 2
- 功能 3

用户类型 2：
导航
- 功能 1
- 功能 2
- 功能 3

其他 2 个用户依此类推...

尽管如此，用户可以访问的每个功能都会有所不同。所以我的问题仍然存在，对于客户端 AngularJS 应用程序，客户端将如何结构化目录？

另外，应该如何设置存储库？

1. API 和客户端代码的单一存储库？
2. 我能否将 API 存储库和客户端存储库分开，并将所有用户帐户视图包含在一个客户端存储库中？
3. 我应该为每种类型的用户帐户创建一个客户端存储库吗？

这些问题的答案将消除很多困惑，并会大大帮助我。我已经对此类应用程序的正确结构进行了大量研究，但似乎无法弄清楚。

非常感谢您的帮助！

Answer 1

文件夹结构因项目而异，因为人不同，项目具有不同的性质。 但无论你做什么，你最终都会得到一些近似文件夹结构，如下所示：-

• 您将需要两个根文件夹，一个用于服务器代码，另一个用于客户端代码。客户端代码文件夹有时也被命名为“app”。

• 如果您有一个大项目，那么您可以在客户端文件夹中创建代表项目模块的子文件夹。通常，开发人员将项目划分为模块以便更好地管理，因此这些子文件夹代表这些模块。

• 在这些模块文件夹中，您可以为组件、模型、模块和路由设置单独的文件夹。

• 还需要一个公用文件夹，您可以在其中推送公用实用程序，如公用管道、过滤器、http 组件、可注入物等。 服务器文件夹将有自己的文件夹结构，具体取决于您使用的是 ASP.NET、JSP 还是 PHP。在本次讨论中，我们将仅限于客户端角度文件夹结构。

图片由http://computerauthor.blogspot.in/2017/11/what-is-best-project-folder-structure.html提供

Answer 2

我建议您去这里：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md 并遵循此处列出的指南。它有点过时了，因为它尚未更新以涵盖组件，但其中大部分仍然适用。

我还建议您在开始之前跳过控制器并查看组件。

真的，如果你有选择，因为你才刚刚开始，我会长期努力地使用 Angular 4，而不是用遗留技术构建一个新的应用程序。

Answer 3

我不能代表您项目的架构，但我在 MEAN 堆栈项目（或本例中为 PEAN）的架构方面有经验。

在这种情况下，我不会将您的项目分成多个 repo，将所有代码放在一个地方会很有帮助。只要它们一起运行，它就应该留在同一个仓库中。当您的项目不一起运行并且实际上是两个项目（如 iOS 应用程序和 Web 应用程序）时，您应该将 repos 分开

我的基本文件结构通常如下所示：

. 
+-- app/ (all of your angular, dynamic web app code)
|   +-- controllers/
|   +-- directives/
|   +-- factories/
|   +-- views/
|   +-- templates/
|   +-- app.js
+-- server/ (all of your nodejs, server side code)
|   +-- controllers/
|   +-- models/
|   +-- routes/
+-- public/ (static assets)
|   +-- css/
|   +-- scripts/
|   +-- images/
+-- index.js (run the project)