• Angular入门到精通系列教程(15)- 目录结构(工程结构)推荐


    环境:

    • 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. 总的原则

    1. 基于Angular CLI创建模块(module),组件(component)等等的内容;
    2. 源代码都放到src 文件夹下;
    3. 应用的根目录创建一个 NgModule, 并命名为app.module.ts(例如 /src/app,这个Angular CLI 会自动帮我们做)
    4. 组件具有多个伴生文件 (.ts、.html、.css 和 .spec),建议为它创建一个文件夹;(Angular CLI 会自动帮我们做)
    5. 为每一组功能(特性区)创建一个模块(NgModule);(这个也方便我们应用惰性加载/延迟加载,预加载)
    6. 在 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
    

    说明

    1. 根目录下的NgModule 默认是 app.module.ts, 不要改名,方便阅读
    2. app 下,每个目录,同时也都是一个模块-NgModule
    3. 一个项目,一般包含多个功能(feature)模块
    4. 推荐使用共享模块-SharedModule,将通用的、功能的功能(service/component/pipe等)放到改模块中。 (下文详细介绍)
    5. 推荐使用核心模块-CoreModule,可以将项目的一些全局的设置、UI等放到该模块。如header、footer组件,安全组件(服务),上下文存储服务等。

    2.3. 共享模块-SharedModule

    上文提到,推荐使用共享模块-SharedModule,将通用的、功能的功能(service/component/pipe等)放到改模块中。具体存放内容包括:

    1. 共享模块中声明那些可能被特性模块引用的可复用组件(Component)、指令(Directive)和管道(Pipe)。
    2. 如果放置服务(Service),由于服务的单例特性,共享模块中只建议放置无状态的服务(Service),对于有状态、或者和业务紧密相关的服务,建议放到CoreModule中。
    3. SharedModule 中声明(declarations)和导出(exports)所有组件、指令和管道,方便其他模块调用
    4. 共享模块(SharedModule)在项目中处于底层,从逻辑上,只能由其他业务逻辑模块调用,不能调用其他模块;
    5. 共享模块(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文件夹下:

    1. 创建子Applicaton
    ng generate application <name> [options]
    
    1. 创建子类库(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. 总结

    1. Angular CLI默认创建的Angular项目,实际是一个工作空间(workspace ),在其内部还可以创建多个子项目
    2. 子项目可以是Application,也可以是类库(Library);
    3. 对于主项目(一般来说是一个Application),以功能模块的方式进行组织;
    4. 公共内容,建议放到共享模块-SharedModule中。
    5. 对于功能模块,可以通过惰性加载(延迟)加载,提高首页加载速度;同时通过预加载技术,可以在空闲时间加载这部分模块,使用户体验更好。



    ---------------- END ----------------






    ======================

  • 相关阅读:
    微信小程序的scheme码
    微信小程序的简单总结(uni-app)
    ES7-ES11新特性
    Promise 总结
    uni-app创建项目及使用 vant-weapp
    vscode 插件整理
    el-upload 组件总结
    从输入URL到页面显示过程中发生了什么
    实验 1:Mininet 源码安装和可视化拓扑工具
    2020软件工程第一次作业
  • 原文地址:https://www.cnblogs.com/skywind/p/14344898.html
Copyright © 2020-2023  润新知