环境:
- 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. 总的原则
- 基于Angular CLI创建模块(module),组件(component)等等的内容;
- 源代码都放到
src
文件夹下; - 应用的根目录创建一个 NgModule, 并命名为app.module.ts(例如 /src/app,这个Angular CLI 会自动帮我们做)
- 组件具有多个伴生文件 (.ts、.html、.css 和 .spec),建议为它创建一个文件夹;(Angular CLI 会自动帮我们做)
- 为每一组功能(特性区)创建一个模块(
NgModule
);(这个也方便我们应用惰性加载/延迟加载,预加载) - 在 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
说明:
- 根目录下的
NgModule
默认是app.module.ts
, 不要改名,方便阅读 - app 下,每个目录,同时也都是一个模块-
NgModule
- 一个项目,一般包含多个功能(feature)模块
- 推荐使用共享模块-SharedModule,将通用的、功能的功能(service/component/pipe等)放到改模块中。 (下文详细介绍)
- 推荐使用核心模块-CoreModule,可以将项目的一些全局的设置、UI等放到该模块。如header、footer组件,安全组件(服务),上下文存储服务等。
2.3. 共享模块-SharedModule
上文提到,推荐使用共享模块-SharedModule,将通用的、功能的功能(service/component/pipe等)放到改模块中。具体存放内容包括:
- 共享模块中声明那些可能被特性模块引用的可复用组件(Component)、指令(Directive)和管道(Pipe)。
- 如果放置服务(Service),由于服务的单例特性,共享模块中只建议放置无状态的服务(Service),对于有状态、或者和业务紧密相关的服务,建议放到CoreModule中。
- SharedModule 中声明(declarations)和导出(exports)所有组件、指令和管道,方便其他模块调用
- 共享模块(SharedModule)在项目中处于底层,从逻辑上,只能由其他业务逻辑模块调用,不能调用其他模块;
- 共享模块(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
文件夹下:
- 创建子Applicaton
ng generate application <name> [options]
- 创建子类库(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. 总结
- Angular CLI默认创建的Angular项目,实际是一个工作空间(workspace ),在其内部还可以创建多个子项目
- 子项目可以是Application,也可以是类库(Library);
- 对于主项目(一般来说是一个Application),以功能模块的方式进行组织;
- 公共内容,建议放到共享模块-SharedModule中。
- 对于功能模块,可以通过惰性加载(延迟)加载,提高首页加载速度;同时通过预加载技术,可以在空闲时间加载这部分模块,使用户体验更好。
---------------- END ----------------
======================