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

清疚 2022-10-24 11:52 2阅读 0赞

### 文章目录 ###

*  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. 实例 ##

**说明**：

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]

1.  创建子类库（Angular Library)

ng generate library <name> [options]

## 3.1. 目录结构示意 ##

# 4. 总结 #

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

> \---------------- END ----------------

> ======================