©2020-2024 ioDraw All rights reserved,
Privacy Policy
又是许久没有动笔写博客了，18年换了公司，一直很忙。最近临近过年，几个项目也都告一段落，趁着测试和Refactor
Code的功夫，想总结一下自己过去三年使用Angular搭建项目的经验。
从当初使用Angular1到现在手里的Angular6，还有已经发布几个月的Angular7，不断迭代的Angular，不断进步，不断优化。
经验的积累使我感受到一个好的Angular项目结构对于开发和维护项目是多么的重要，他能够提升我们的开发效率，团队协作，统一规范，再大型的项目都可以很好的进行协同开发。
目前我负责的项目都会按照以下的结构来搭建：
首先app.routing.ts里面类似这样:
{ path: 'login', canActivate: [IsNotSignedInGuard], loadChildren:
'../pages/login/login.module#AppLoginModule' }, { path: '', loadChildren:
'../pages/layout/layout.module#AppLayoutModule' }, { path: '404', loadChildren:
'../pages/not-found/not-found.module#NotFoundModule' }, { path: 'password',
loadChildren: '../pages/password/password.module#PasswordModule' }, {path:
'**', redirectTo: '404'}
一：概述
这里layout是我们网站的主要布局，比如公共的header,footer，还有各个业务模块都会在里面，而login模块这里因为比较独立，所以设计在layout外部，找不到的路由都会跳转到404页面。canActivate是控制用户是否能够进入路由的权限guard，可以是异步的，比如从后端获取某些权限设置，然后处理权限逻辑，再决定何时执行observer.next(true)即可进入，否则不可进入，并执行你想要的操作。
pages文件夹是业务页面，可能包含非常多的模块，我们采用大家已经很熟悉的懒加载模式，各个模块里面包含各自的页面和组件，相对独立，便于维护不同的模块。如果是这个模块里面公用的组件，则会在这个模块文件夹下建立compoents文件夹，如果是整个项目公用的组件，则放在shared/components文件夹。
各个模块会引入自己需要使用的服务和管道，指令等。管道和指令一般都是整个项目公用的，放在shared文件夹下，遇到少数只有某一个模块特有的，就放在这个模块里面无妨。服务我们根据不同的功能模块，在shared/core文件下面建立各种不同的目录，里面主要包含两类文件，一类是XXXXX.data.ts，也就是model数据层，一类是XXXX.service.ts，也就是请求层。这样结构清晰，纯业务的model和service都在这边，和pages文件分离。类似这样：
二：shared文件
最开始我们需要建立的是shared.module.ts，在这里我们把原本经常在app.module.ts引入的各种基础的，公共的模块在这里统一管理，比如FormsModule，RouterModule，HttpClientModule，TranslateModule，还有全局引入的各种第三方库。
另外就是我们自己写的各种公共的组件，管道，指令，服务都需要在这里引入，声明，导出，方便整个项目使用。类似：
@NgModule({ imports: [ RouterModule, CommonModule, FormsModule,
HttpClientModule, ReactiveFormsModule, TranslateModule, ], declarations: [
TimeFormatPipe, AppLoadingComponent, QrCodeDirective, DecimalControlDirective,
MemberStatusPipe, ], exports: [ CommonModule, FormsModule, ReactiveFormsModule,
TimeFormatPipe, AppLoadingComponent, TranslateModule, DecimalControlDirective,
MemberStatusPipe, ], entryComponents: [TwoFactorDialogComponent] }) export
class SharedModule { static forRoot(): ModuleWithProviders { return { ngModule:
SharedModule, providers: [ DecimalPipe, HttpClientService,
CurrencyChannelService, UtilsService, CookieService, LanguageService,
LinkGuard, PrivateAuthBeforeRouteGuard, IsNotSignedInGuard,
InputNumberLimitPipe, CurrencyService, ExportDataService, ] }; } }
然后在app.module.ts里面，我们引入：
SharedModule.forRoot(),
这样在不同的功能模块里，我们只需要引入SharedModule，而不需要每次都做重复的引入表单等等一些公共的模块。
三：shared下面的各个内容：
1：component文件里面是项目共用的组件，比如loading，网络错误等等。
2: config文件是各种配置文件，比如一些常量，服务器地址，状态值，等等，基于单一原则，最好按照不同种类分开文件夹。
3：core文件是业务模型，网络请求，根据不同功能模块建立不同文件夹，数据Model和Service放在对应的模块下面。
4：directives是项目共用的指令，主要用来控制DOM变化，比如交互操作，表单输入操作，DOM显示
5：functions里面是公共的方法，比如每个model需要用到的parseData函数，处理解析对象
6：guard是各种路由权限控制逻辑
7：modules是非业务类的公共模块，比如我们封装的动态表单，或者其他的公共模块
8：pipes是公共管道，处理数据格式化
9：services是各种公共服务，比如我们自己封装的HTTP请求，Utils，大多是非业务类的，如果跟业务相关，那么也是比如导出数据这种和具体模块无关的，尽量保持这里的服务具有全局属性。
10：styles文件夹是我们自己的样式文件，比如我们项目的base.scss，button.scss这种。
四：总结
这样一个比较清晰的项目结构就搭建好了，数据和业务分离的非常独立，页面可以很方便的使用各种公共的工具，不需要太多重复的代码。
另外关于项目的数据流，最好全局使用RXJS进行开发，当然，这是另外一个课题了，不过，使用了RXJS来管理数据状态之后，你会爱上它的简洁优雅，函数式编程和强大的性能。
我们使用Angular可以提高我们的开发效率，开发出更好的产品，前提是我们一定要好好的使用它。学习之旅未止，后面我打算开始RXJS的系列博客，深入的总结和学习RX编程思想。