Angular入门到精通系列教程（15）- 目录结构（工程结构）推荐

目录

• 1. 概要
• 2. 目录结构（工程结构）推荐
  • 2.1. 总的原则
  • 2.2. 实例
  • 2.3. 共享模块-SharedModule
• 3. 高级应用 - angular库、工作空间（workspace ）
  • 3.1. 目录结构示意
• 4. 总结

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

1. 概要

实际的Angular项目，肯定不是一个简单的Hello World程序，会包含很多的功能，很多的文件。那么如何更好的组织这些文件呢？官方给了一个原则，可以供参考：
https://angular.io/guide/styleguide#application-structure-and-ngmodules。
下面，我们来通过一个例子具体解释一下。

2. 目录结构（工程结构）推荐

2.1. 总的原则

1. 基于Angular CLI创建模块（module），组件（component）等等的内容；
2. 源代码都放到src 文件夹下；
3. 应用的根目录创建一个 NgModule, 并命名为app.module.ts（例如 /src/app，这个Angular CLI 会自动帮我们做)
4. 组件具有多个伴生文件 (.ts、.html、.css 和 .spec)，建议为它创建一个文件夹;(Angular CLI 会自动帮我们做)
5. 为每一组功能（特性区）创建一个模块（NgModule）；（这个也方便我们应用惰性加载/延迟加载，预加载）
6. 在 src/app/shared 目录中创建名叫 SharedModule 的共享模块，方便其他功能调用；

2.2. 实例

src/ 目录下：
+---app
|   |   app-routing.module.ts
|   |   app.component.css
|   |   app.component.html
|   |   app.component.spec.ts
|   |   app.component.ts
|   |   app.module.ts
|   |   
|   +---feature1
|   |   |   ......
|   |           
|   +---feature1
|   |   |   ......
|   |           
|   +---core
|   |   |   core.module.ts
|   |   |   ....
|   |           
|   \---shared
|       |   shared.module.ts
|       |   
|       +---components
|       +---pipes
|       +---services
|               
+---assets
|       .gitkeep
|       
\---environments
        environment.prod.ts
        environment.ts

说明：

1. 根目录下的NgModule 默认是 app.module.ts, 不要改名，方便阅读
2. app 下，每个目录，同时也都是一个模块-NgModule
3. 一个项目，一般包含多个功能（feature）模块
4. 推荐使用共享模块-SharedModule，将通用的、功能的功能（service/component/pipe等）放到改模块中。 （下文详细介绍）
5. 推荐使用核心模块-CoreModule，可以将项目的一些全局的设置、UI等放到该模块。如header、footer组件，安全组件（服务），上下文存储服务等。

2.3. 共享模块-SharedModule

上文提到，推荐使用共享模块-SharedModule，将通用的、功能的功能（service/component/pipe等）放到改模块中。具体存放内容包括：

1. 共享模块中声明那些可能被特性模块引用的可复用组件(Component)、指令(Directive)和管道(Pipe)。
2. 如果放置服务（Service），由于服务的单例特性，共享模块中只建议放置无状态的服务（Service），对于有状态、或者和业务紧密相关的服务，建议放到CoreModule中。
3. SharedModule 中声明(declarations)和导出(exports)所有组件、指令和管道，方便其他模块调用
4. 共享模块（SharedModule）在项目中处于底层，从逻辑上，只能由其他业务逻辑模块调用，不能调用其他模块；
5. 共享模块（SharedModule）不建议使用延迟加载（惰性加载），因为这样会破坏服务的单例特性；

3. 高级应用 - angular库、工作空间（workspace ）

想一想你是如何安装angular相关的类库的？我们使用的是npm install xxx。那么这些第三方angular库是如何开发的呢？我们是否可以把通用的内容写成Angular类库，然后方便在多个angular项目间共享了？又或者直接发布到官方npm站点？

Angular 从6.0开始，引入了工作区的概念。使用Angular CLI，默认创建的就是一个工作空间(workspace)。一个工作空间(workspace)可以有一个主项目，同时可以有多个子项目。当然这些子项目可以是angular的application， 也可以是Library。Angular的子项目，都在app下的projects 之下，和src目录平级。

这样，一般来说，我们的项目中，除了主程序，还可以包含多个子类库。这样在开发时方便主程序、类库同时开发调试；也可以项目结束后，单独发布类库，实现项目之间的代码共享。

创建子项目也很简单，子项目有2种类型，application（可以启动的）和Library（Angular类库），默认都在projects文件夹下：

1. 创建子Applicaton

ng generate application <name> [options]

2. 创建子类库（Angular Library)

ng generate library <name> [options]

3.1. 目录结构示意

+---projects
|   \---ng-lib-a
|       \---src
|           \---lib
|   \---ng-lib-b
|       \---src
|           \---lib
\---src
    +---app
    |   +---feature1
    |   +---feature2
    |   +---core
    |   |   +---footer
    |   |   \---header
    |   \---shared
    |       +---components
    |       +---pipes
    |       \---services
    +---assets
    \---environments

4. 总结

1. Angular CLI默认创建的Angular项目，实际是一个工作空间（workspace ），在其内部还可以创建多个子项目
2. 子项目可以是Application，也可以是类库（Library）；
3. 对于主项目（一般来说是一个Application），以功能模块的方式进行组织；
4. 公共内容，建议放到共享模块-SharedModule中。
5. 对于功能模块，可以通过惰性加载（延迟）加载，提高首页加载速度；同时通过预加载技术，可以在空闲时间加载这部分模块，使用户体验更好。

---------------- END ----------------

======================