Angular7入门辅助教程(一)——Angular模块

如果有任何的非技术障碍,比如如何新建Angular项目,请先到我的"Angular7入门辅助教程"专栏参考这篇博客:Angular7入门辅助教程——前篇

NgModule

本篇博客主要介绍一下Angular模块是什么、有什么用、我们应该如何使用Angular模块,以及其与ts模块的区别等等一些知识点

心法篇

  • Angular应用是模块化的,拥有自己的模块系统,称为NgModule。
  • 一个NgModule是一个容器,里面存放一些内聚的代码块,这些代码块专注于某应用领域、某工作流或一组紧密相关的功能。
  • NgModule可以包含组件、服务提供商、指令等,这些组件既可以在本模块中使用,也可以以某种方式供外部模块使用。
  • 一个应用至少包含一个NgModule,我们成为根模块(AppModule),根模块和其他普通的模块有点不同,因为它要引导应用启动。

详细教程篇

1、Angular模块的元数据对象

Angular怎么知道这是一个NgModule,总得有一个标识吧!这个标识就是@NgModule装饰器,@NgModule接受一个元数据对象作为参数,它用来描述一个Angular模块(Angular组件、指令、服务等都有自己的元数据对象!),下面我们来看一下这个元数据对象

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

其中@NgModule()函数是装饰器,Angular会把紧挨着@NgModule装饰器的那个类解析成Angular模块类,@NgModule()函数中的参数就是元数据对象,

  • imports(导入表)——该模块依赖的其他模块应该写在这个数组中,这样本模块才可以使用其他模块导出的指令、组件、管道!
  • providers(服务提供商)——本模块依赖或者提供的服务,一个模块级别的服务,可以被注入(被使用)到该模块的任何地方
  • declarations(可声明对象表)——属于本模块的组件指令管道都应该放在这个数组中,也就是说,它们三者是Angular中的可声明对象!实际上在Angular中可声明对象只有它们三个!
  • exports(导出表)——本模块提供给其他外部模块使用的可声明对象(一定是declarations数组的子集),其他模块可以通过导入该模块(写在imports数组中)来使用这些可声明对象
  • bootstrap:启动引导的组件,或者也叫根组件,Angular在启动引导的时候,会将这数组中的组件插到index.html页面中,默认只有一个根组件(随着引用扩大,会形成单根组件树),当然你也可以在该组件放多个引导启动的组件,这样这些组件都会是自己组件树的根

根模块和普通模块的区别就在于这个bootstrap,因为,boostrap只应该出现在根模块中

2、模块的创建

在Angular中,你可以使用Angular CLI快速创建一个模块

ng generate module 模块名

例如,我要创建一个名叫hero的模块

ng generate module hero

需要Angular项目中运行该命令,Angular会在src/app目录下创建一个名叫hero的文件夹,里面有一个名叫hero.module.ts的文件(也就是模块名.module.ts),内容如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class HeroModule { }

 这个文件中包含Angular模块的基本原型:@NgModule装饰器以及紧随其后的一个类(有了@NgModule装饰器后,就可以叫它模块类,否则,它只是普通的ts类)

3、Angular模块中的组件、服务、指令、管道

  • Angular模块是一个内聚的代码块,其元数据对象的declarations数组可以声明属于本模块的组件、指令、管道,使得这些可声明对象在本模块中随处可用!
  • 值得注意的是:这些可声明对象只需要也只能由一个Angular模块声明,也就是说,同一个可声明对象不能出现在两个模块的元数据对象的declarations属性中!
  • 如果其他模块需要使用该模块的可声明对象,只需要该模块将可公开的可声明对象写在元数据对象的exports属性中!而别的模块只需imports该模块,就可以使用该模块导出的可声明对象(就像使用属于自己的可声明对象一样!而不需要将这些可声明对象写在自己的declarations属性中!!)
  • 该模块如果要提供服务,只需要将服务写在该模块元数据对象的providers属性中,如果别的模块要使用这些服务,也只需要导入该模块即可(其实没这么简单,详细内容请看这几篇文章:依赖注入之服务服务提供商单例服务

4、Angular模块 VS ts模块

简单的说:Angular模块是一个内聚的代码块,它为其中的指令、组件、服务等提供上下文的编译环境,而ts模块则完全不同,在ts中,一个文件就可以看成一个模块,我们可以使用import来使用别的ts模块export的类、属性等,现在,我们看到下面这段代码:

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
 
import { AppComponent } from './app.component';
 
/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • 开头的五个import就是导入的五个ts模块(上面的注释虽然写的是javascript,其中的区别你可以百度一下——ts模块,ECMAScript模块,ECMAScript与javascript)
  • 而Angular模块则使用这些导入的ts模块,将它们内聚起来,共同组成应用,为其提供上下文编译环境,这些ts模块有些是组件类,有些是模块类,总之它们是Angular应用必需品

所以,Angular模块和ts模块是不同的两个概念,但是它们相辅相成,共同为砸门的应用服务

问题篇:

上面说了,NgModule元数据对象的属性exports表示那些可供外部模块使用可声明对象,那么问题来了:我们应该将什么样的可声明对象写在这个exports数组中呢?或者说,我们如何判断该组件是需要写在exports中的?(答案可不是:我们应该将供外部模块使用的可声明对象写在这个exports数组中,这答案对实际应用毫无帮助!)

更新中。。。

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页