如何为你的Angular项目定义一个高度可伸缩的文件夹结构

前言

本文中使用的实践非常适合我的单个用例，因此绝对不应严格遵循。 项目的文件夹结构将根据多种因素而变化。 但是，如果您对着重于多模块架构的结构感兴趣，而又着重于扩展性，请继续阅读。

注意！ [+]表示文件夹中还有其他文件。

|-- 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

声明：本译文仅供技术讨论及推广，若有侵权请及时联系，将会及时进行更正。