专栏首页程序员宇说Angular 从入坑到挖坑 - 模块简介

Angular 从入坑到挖坑 - 模块简介

一、Overview

Angular 入坑记录的笔记第七篇,介绍 Angular 中的模块的相关概念,了解相关的使用场景,以及知晓如何通过特性模块来组织我们的 Angular 应用

对应官方文档地址:

二、Knowledge Graph

三、Step by Step

3.1、前端模块化

前端模块化是指将程序中一组相关的功能按照一定的规则组织在一块,整个模块内部的数据和功能实现是私有的,通过 export 暴露其中的一些接口(方法)与系统中的别的模块进行通信

NgModule 简介

在 Angular 应用中,至少会存在一个 NgModule,也就是应用的根模块(AppModule),通过引导这个根模块就可以启动整个项目

像开发中使用到 FormsModule、HttpClientModule 这种 Angular 内置的库也都是一个个的 NgModule,在开发中通过将组件、指令、管道、服务或其它的代码文件聚合成一个内聚的功能块,专注于系统的某个功能模块

常见的 NgModule 模块

模块名称

模块所在文件

功能点

BrowserModule

@angular/platform-browser

用于启动和运行浏览器应用的的基本服务

CommonModule

@angular/common

使用 NgIf、NgFor 之类的内置指令

FormsModule

@angular/forms

使用 NgModel 构建模板驱动表单

ReactiveFormsModule

@angular/forms

构建响应式表单

RouterModule

@angular/router

使用前端路由

HttpClientModule

@angular/common/http

发起 http 请求

JavaScript 模块与 NgModule

在 JavaScript 中,每一个 js 文件就是一个模块,文件中定义的所有对象都从属于那个模块。 通过 export 关键字,模块可以把其中的某些对象声明为公共的,从而其它 JavaScript 模块可以使用 import 语句来访问这些公共对象

例如下面的示例代码中,别的 javascript 模块可以通过导入这个 js 文件来直接使用暴露的 getRolesgetUserInfo 方法

function getRoles() {
    // ...
}

function getUserInfo() {
    // ...
}

export {
    getRoles,
    getUserInfo
}

NgModule 是一个带有 @NgModule 装饰器的类,通过函数的参数来描述这个模块,例如在上节笔记中创建的 CrisisModule,定义了我们在该特性模块中创建的组件,以及需要使用到的其它模块

在使用 @NgModule 装饰器时,通常会使用到下面的属性来定义一个模块

  • declarations:当前模块中的组件、指令、管道
  • imports:当前模块所需的其它 NgModule 模块
  • exports:其它模块中可以使用到当前模块可声明的对象
  • providers:当前模块向当前应用中其它应用模块暴露的服务
  • bootstrap:用来定义整个应用的根组件,是应用中所有其它视图的宿主,只有根模块中才会存在

3.2、应用的根模块

根模块是用来启动此 Angular 应用的模块, 按照惯例,它通常命名为 AppModule

通过 Angular CLI 新建一个应用后,默认的根模块代码如下,通过使用 @NgModule 装饰器装饰 AppModule 类,定义了这个模块的一些属性特征,从而告诉 Angular 如何编译和启动本应用

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
declarations

declarations 数组告诉 Angular 哪些组件属于当前模块。 当创建新的组件时,需要将它们添加到 declarations 数组中。每个组件都只能声明在一个 NgModule 类中,同时,如果你使用了未声明过的组件,Angular 将会报错

同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明

imports

imports 数组表明当前模块正常工作时需要引入哪些的模块,例如这里使用到的 BrowserModuleAppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule,它表现出当前模块的一个依赖关系

providers

providers 数组定义了当前模块可以提供给当前应用其它模块的各项服务,例如一个用户模块,提供了获取当前登录用户信息的服务,因为应用中的其它地方也会存在调用的可能,因此,可以通过添加到 providers 数组中,提供给别的模块使用

bootstrap

Angular 应用通过引导根模块来启动的,因为会涉及到构建组件树,形成实际的 DOM,因此需要在 bootstrap 数组中添加根组件用来作为组件树的根

3.3、特性模块

特性模块是用来将特定的功能或具有相关特性的代码从其它代码中分离出来,聚焦于特定应用需求。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作

在上一章中,定义了一个 CrisisModule 用来包括包含与危机有关的功能模块,创建特性模块时可以通过 Angular CLI 命令行进行创建

-- 创建名为 xxx 的特性模块
ng new component xxx
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CrisisRoutingModule } from './crisis-routing.module';

import { FormsModule } from '@angular/forms';

import { CrisisListComponent } from './crisis-list/crisis-list.component';
import { CrisisDetailComponent } from './crisis-detail/crisis-detail.component';


@NgModule({
  declarations: [
    CrisisListComponent,
    CrisisDetailComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    CrisisRoutingModule
  ]
})
export class CrisisModule { }

当创建完成后,为了将该特性模块包含到应用中,需要和 BrowserModuleAppRoutingModule 一样,在根模块中 imports 引入

默认情况下,NgModule 都是急性加载的,也就是说它会在应用加载时尽快加载,所有模块都是如此,无论是否立即要用。对于带有很多路由的大型应用,考虑使用惰性加载的模式。惰性加载可以减小初始包的尺寸,从而减少程序首次的加载时间

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// 添加自定义的模块
import { CrisisModule } from './crisis/crisis.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CrisisModule, // 引入自定义模块
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular 从入坑到挖坑 - HTTP 请求概览

    angular 入坑记录的笔记第四篇,介绍在 angular 中如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互。

    程序员宇说
  • Angular 从入坑到挖坑 - Angular 使用入门

    angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用。入坑一个多星期,通过学习官方...

    程序员宇说
  • [Vue 牛刀小试]:第九章 - 组件基础再探(data、props)

      在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件。不知道你是否记得,在上一章中,我们提到组件是一个可...

    程序员宇说
  • 【Python面试】 说说Python模块主要分哪三类?

    小猿会从最基础的面试题开始,每天一题。如果参考答案不够好,或者有错误的话,麻烦大家可以在留言区给出自己的意见和讨论,大家是要一起学习的 。

    程序IT圈
  • DDD理论学习系列(13)-- 模块

    1. 引言 Module,即模块,是指提供特定功能的相对独立的单元。提到模块,你肯定就会想到模块化设计思想,也就是功能的分解和组合。对于简单问题,可以直接构建单...

    圣杰
  • Python|常用的几个模块

    首先我们先来了解一下什么是python模块?为了方便编写可维护的代码,我们会把很多函数进行分组,分别放到不同的文件里,这样的话,每个文件包含的代码就会相对较少一...

    数据山谷
  • 聊一聊ABP vNext的模块化系统

    在 Abp vNext 框架里面,模块系统是整个框架的基石,了解了模块系统以后,对于剩下的设计就很好理解了。

    心莱科技雪雁
  • Javascript框架设计思路图

    这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一、简介: 1、市面上主流的JS框架,大多数是由一个个模...

    郑小超.
  • Nginx的模块化设计

    Nginx由内核和模块组成 内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block,而在这个lo...

    dys
  • ABP框架 - 模块系统

    我思故我在

扫码关注云+社区

领取腾讯云代金券