如何为你的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

footerheader文件夹包含全局组件文件,这些文件在整个应用程序中静态使用。 这些文件将出现在应用程序的每个页面上。

|-- 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文件夹包含所有“共享”组件。例如 loadersbuttons组件,它们将会被其他多个组件使用。

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

directivespipesmodels文件夹包含整个应用程序中使用的指令(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

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

你可能感兴趣的:(前端,angular,angular2,angular,项目结构,项目搭建)