如何为你的Angular项目定义一个高度可伸缩的文件夹结构
文章目录
-
- 前言
- Angular 风格指南
- 模块（Modules）
- 核心模块（The Core Module）
- 共享模块（The Shared Module）
- 配置（Configs）
- 样式（Styling）
- 惰性加载（Lazy Loading）
- 总结
前言
本文中使用的实践非常适合我的单个用例，因此绝对不应严格遵循。 项目的文件夹结构将根据多种因素而变化。 但是，如果您对着重于多模块架构的结构感兴趣，而又着重于扩展性，请继续阅读。
注意！ [+]表示文件夹中还有其他文件。
|-- app
|-- modules
|-- home
|-- [+] components
|-- [+] pages
|-- home-routing.module.ts
|-- home.module.ts
|-- core
|-- [+] authentication
|-- [+] footer
|-- [+] guards
|-- [+] http
|-- [+] interceptors
|-- [+] mocks
|-- [+] services
|-- [+] header
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts
|
|-- shared
|-- [+] components
|-- [+] directives
|-- [+] pipes
|-- [+] models
|
|-- [+] configs
|-- assets
|-- scss
|-- [+] partials
|-- _base.scss
|-- styles.scss
Angular 风格指南
Angular的风格与语法中提供了基本的最佳实践指南。 该指南提出了对语法，约定和应用程序结构的见解。
对我而言真正突出的关键准则是**“构建应用程序，以便您可以快速找到代码”和“具有近期的实现视图和长远的眼光。 从小处着手，但请记住应用程序的前进方向”**。 这意味着不应该将自己锁定在某一个特定的结构上，因为它会根据项目而发生很大变化。
模块（Modules）
|-- modules
|-- home
|-- components
|-- pages
| |-- home
| |-- home.component.ts|html|scss|spec
|
|-- home-routing.module.ts
|-- home.module.ts
Tom Crowley 在这个主题上有一篇非常有趣的文章，他从基本的Angular项目逐步拓展成一个较为成熟稳定的文件夹结构。 我真的很喜欢为 页面（pages） 和 组件（components） 指定文件夹的模块想法。 非常适合缩放，并且组件逻辑和页面逻辑是分离的。
核心模块（The Core Module）
CoreModule承担根AppModule的角色，但不是由Angular在运行时引导的模块。 CoreModule应该包含单例服务（通常是这种情况），通用组件，和其他每个应用程序只有一个实例的功能。 为了防止将核心模块重新导入其他地方，您还应该在核心模块的构造函数中为其添加保护。
|-- core
|-- [+] authentication
|-- [+] footer
|-- [+] guards
|-- [+] http
|-- [+] interceptors
|-- [+] mocks
|-- [+] services
|-- [+] header
|-- core.module.ts
|-- ensureModuleLoadedOnceGuard.ts
|-- logger.service.ts
文件夹authentication仅处理用户的身份验证周期（从登录到注销）。
|-- authentication
|-- authentication.service.ts|spec.ts
footer和header文件夹包含全局组件文件，这些文件在整个应用程序中静态使用。 这些文件将出现在应用程序的每个页面上。
|-- header
|-- header.component.ts|html|scss|spec.ts
|-- footer
|-- footer.component.ts|html|scss|spec.ts
http文件夹处理来自应用程序http调用之类的内容。 api.service.ts文件，将所有通过应用程序运行的http调用保持在一个位置。 否则，该文件夹包含用于与不同API路由进行交互的文件夹。
|-- http
|-- user
|-- user.service.ts|spec.ts
|-- api.service.ts|spec.ts
Angular 4.x引入了期待已久的用于处理HTTP请求的功能-HttpInterceptor接口。 这使我们能够捕获和修改API调用的请求（requests）和响应（response）。 interceptors文件夹是拦截器的集合。
|-- interceptors
|-- api-prefix.interceptor.ts
|-- error-handler.interceptor.ts
|-- http.token.interceptor.ts
guards文件夹包含用来保护应用程序中不同路由的所有路由守卫（guards）。
|-- guards
|-- auth.guard.ts
|-- no-auth-guard.ts
|-- admin-guard.ts
模拟对于测试特别有用，但是也可以使用它们来检索虚拟数据，直到建立后端为止。 mocks文件夹包含应用程序的所有模拟文件。
|-- mocks
|-- user.mock.ts
所有其他单例服务都放置在services文件夹中。
|-- services
|-- srv1.service.ts|spec.ts
|-- srv2.service.ts|spec.ts
共享模块（The Shared Module）
SharedModule是所有共享组件，管道（pipes)/过滤器（filters）和服务（services）都应存放的地方。 当这些项目将被重用时，可以将其导入任何其他模块中。 共享模块不应与应用程序的其余部分有任何依赖关系，因此不应依赖任何其他模块。
|-- shared
|-- [+] components
|-- [+] directives
|-- [+] pipes
components文件夹包含所有“共享”组件。例如 loaders和buttons组件，它们将会被其他多个组件使用。
|-- components
|-- loader
|-- loader.component.ts|html|scss|spec.ts
|-- buttons
|-- favorite-button
|-- favorite-button.component.ts|html|scss|spec.ts
|-- collapse-button
|-- collapse-button.component.ts|html|scss|spec.ts
directives，pipes和models文件夹包含整个应用程序中使用的指令（directive），管道（pipe）和模型（model）。
|-- directives
|-- auth.directive.ts|spec.ts
|-- pipes
|-- capitalize.pipe.ts
|-- safe.pipe.ts
|-- models
|-- user.model.ts
|-- server-response.ts
配置（Configs）
config文件夹包含应用程序设置和其他预定义值。
|-- configs
|-- app-settings.config.ts
|-- dt-norwegian.config.ts
样式（Styling）
项目的全局样式放置在assets下的scss文件夹中。
|-- scss
|-- partials
|-- _layout.vars.scss
|-- _responsive.partial.scss
|-- _base.scss
|-- styles.scss
scss文件夹仅包含一个文件夹-partials。 该文件夹下的文件可以被其他scss文件导入。
惰性加载（Lazy Loading）
应用程序使用惰性加载（lazy-loading），这意味着在用户实际访问路由之前不会加载该模块。 通过使用“模块（Modules）”部分中描述的结构，您可以轻松地在主应用程序路由文件中引用每个模块。
总结
总之，在Angular中创建文件夹结构没有蓝图。 结构将根据您正在从事的项目而发生很大变化。 本文介绍了使用多个模块的显式用例，这些模块又分为页面和一组共享的组件。 但是这里是一些具有扁平结构的github仓库的链接：
- https://github.com/ngx-rocket/starter-kit/tree/master/src
- https://github.com/gothinkster/angular-realworld-example-app
声明：本译文仅供技术讨论及推广，若有侵权请及时联系，将会及时进行更正。