一、Overview

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

对应官方文档地址:

二、Contents

  1. Angular 从入坑到弃坑 - Angular 使用入门
  2. Angular 从入坑到挖坑 - 组件食用指南
  3. Angular 从入坑到挖坑 - 表单控件概览
  4. Angular 从入坑到挖坑 - HTTP 请求概览
  5. Angular 从入坑到挖坑 - Router 路由使用入门指北
  6. Angular 从入坑到挖坑 - 路由守卫连连看
  7. Angular 从入坑到挖坑 - 模块简介

三、Knowledge Graph

四、Step by Step

4.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:用来定义整个应用的根组件,是应用中所有其它视图的宿主,只有根模块中才会存在

4.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 数组中添加根组件用来作为组件树的根

4.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 { }

Angular 从入坑到挖坑 - 模块简介的更多相关文章

  1. Angular 从入坑到挖坑 - 表单控件概览

    一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...

  2. Angular 从入坑到挖坑 - 组件食用指南

    一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...

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

    一.Overview angular 入坑记录的笔记第四篇,介绍在 angular 中如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互. 对应官方文档地址: Angul ...

  4. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  5. Angular 从入坑到挖坑 - 路由守卫连连看

    一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...

  6. Angular 从入坑到挖坑 - Angular 使用入门

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

  7. 【转】angular指令入坑

    独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...

  8. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  9. Phalcon如何创建多模块并能进行访问 《Phalcon入坑指南系列 四》

    本系列目录 一.Phalcon在Windows上安装 <Phalcon入坑指南系列 一> 二.Phalcon入坑必须知道的功能<Phalcon入坑指南系列 二> 三.Phalc ...

随机推荐

  1. 【图机器学习】cs224w Lecture 15 - 网络演变

    目录 Macroscopic Forest Fire Model Microscopic Temporal Network Temporal PageRank Mesoscopic 转自本人:http ...

  2. 50个SQL语句(MySQL版) 问题二十

    --------------------------表结构-------------------------- student(StuId,StuName,StuAge,StuSex) 学生表 tea ...

  3. 利用init进程监控底层节点的方法架构

    native层利用底层节点变化,再针对变化进行相应的函数调用,实现某些功能. 架构如下: 底层提供节点更新,以及healthd读取节点的实现,都比较简单.而其余部分比较关键. 特别注意init监控pr ...

  4. Java实现 蓝桥杯VIP 算法训练 会议中心

    算法训练 会议中心 时间限制:2.0s 内存限制:512.0MB 会议中心 Siruseri政府建造了一座新的会议中心.许多公司对租借会议中心的会堂很感兴趣,他们希望能够在里面举行会议. 对于一个客户 ...

  5. Java实现 LeetCode 204 计数质数

    204. 计数质数 统计所有小于非负整数 n 的质数的数量. 示例: 输入: 10 输出: 4 解释: 小于 10 的质数一共有 4 个, 它们是 2, 3, 5, 7 . class Solutio ...

  6. Java实现 蓝桥杯VIP 算法提高 3-1课后习题2

    算法提高 3-1课后习题2 时间限制:1.0s 内存限制:256.0MB 问题描述 编写一个程序,接受用户输入的10个整数,输出它们的和. 输出格式 要求用户的输出满足的格式. 例:输出1行,包含一个 ...

  7. 【Jquery】判断宽度跳转

    $(window).resize(function(){ var wWidth = screen.width; if( wWidth < 788 ){ window.location.href= ...

  8. NumPy之计算两个矩阵的成对平方欧氏距离

    问题描述 设 \({X_{m \times k}} = \left[ {\vec x_1^T;\vec x_2^T; \cdots ;\vec x_m^T} \right]\) (; 表示纵向连接) ...

  9. 从程序员到项目主管再到项目总监,一个IT从业者三个职业生涯阶段的工作生活日常

    这是王不留的第 8 篇原创文章 前段时间写过<王不留的十多年工作和生活的流水帐>,在知乎.简书,还有不少微信的朋友私信问我每天四点钟是如何做到的?你现在的作息时间是怎么安排的? 于是,我将 ...

  10. MacOS配置.bash_profile,重启终端后配置失效和MacOS .zshrc does not exist问题

    MacOS配置.bash_profile,重启终端后配置失效和MacOS .zshrc does not exist问题 场景 ​ 在Mac中配置golang环境变量更改GOPATH路径,在~/.ba ...