Angular7知识点1----Angular模块

蒋向笛

2023-12-01

版权声明：本文为博主原创文章，未经博主允许不得转载.ttps://blog.csdn.net/qq_34414916/article/details/85164742

本篇博客主要介绍一下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数组中，这答案对实际应用毫无帮助！）

更新中。。。

Angular7知识点1----Angular模块

心法篇

详细教程篇

问题篇：

相关阅读

相关文章

相关问答

相关文档