了解angular10模块相关概念,快速入门!

文章2022-04-04118 人已阅来源:网络

本篇文章给大家了解一下angular10中的模块,介绍一下模块构成、ngModule 属性、常用模块、angualr模块和js模块的区别以及模块懒加载,下面来一起看看。

了解angular10模块相关概念,快速入门!

模块概述

NgModule 模块是Angular种一个重要的点,因为Angular的基本构造块就是NgModule。NgModule 会把相关的代码(组件,指令,服务)收集到一些功能集中,形成功能单元。可以说:模块为组件,指令,服务提供了编译的上下文环境。【相关教程推荐:《angular教程》】

在使用Angular CL 命令新建一个项目的时候,会给我们生成一个根模块,命名为 AppModule,根模块有一个根组件AppComponent,引导这个根模块就可以启动应用。Angular 应用是模块化的,我们在开发中会根据其功能 作用 以及其特性,建立大大小小各种模块,从而构建其成为一个应用程序,任何模块都能包含任意数量的其它组件。

模块构成(基础,掌握)

angular模块就是一个带有@ngModule() 装饰器的类,装饰器@ngModule接受一个元数据对象。该对象的属性用来描述该模块。

  • declarations: 声明组件,指令,管道
  • imports:引入依赖项
  • exports:导出模块
  • providers:服务注册
  • bootstrap:指定宿主组件
import { BrowserModule } from '@angular/platform-browser';
//从主模块中引入NgModule(模块装饰器或模块注解)
import { NgModule } from '@angular/core';
//引入组件,因为模块为组件提供编译的上下文环境
import { AppComponent } from './app.component';
// 引入路由模块
import { AppRoutingModule } from './app-routing.module';

//装饰器以json的形式声明元数据
@NgModule({
   //组合模块的组件和管道
  declarations: [ AppComponent ],
  //模块依赖项
  imports: [ BrowserModule,AppRoutingModule ],
  //子模块可以输入导出的模块
  imports: [],
  //模块提供的服务
  providers: [],
  //指定宿主组件,只在根模块中出现
  bootstrap: [AppComponent]
})
export class AppModule { }

ngModule 属性解释(理解)

点进去@NgModule() 装饰器的类我们可以看到他有如下属性以及官方的对其属性的解释。

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。(你也可以在组件级别指定服务提供商,这通常是首选方式。)
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

属性的详细解释

providers:将本模块所有在组件中注入的服务,在这里提前定义好,否则在此模块中使用这个服务会有错误提示。

declaration:declaration 英文意思为声明。在这里声明一些模块中要使用到的一些组件,指令,管道等。

imports:导入一些模块,比如说我把所有的指令构成一个模块 我使用其中某些指令的时候,我可以选择导入整个指令模块。也可以导入一些通过npm install 安装的一些模块导入其中,才可以使用。

exports:导出组件or指令管道等,以供引用此模块的模块可以使用此模块的组件or 指令管道等。

exporyComponents:entry component 表示 angular 的入口组件,可以引导组件是一个入口组件,Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义,但是啥时候用呢,比如,我要弹出一个组件,那么这个组件是要动态加载到DOM中了吧,这个时候就需要将这个组件xxxComponent写上了。

bootstrap:这个模块启动的时候应该启动的组件,上面代码可以看到AppModule是作为根模块的启动组件。

schemas:不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明。

常用模块(基础,掌握)

NgModule 导入 使用
BrowserModule @angular/platform-browser 想要在浏览器中运行应用时
CommonModule @angular/common 当你想要使用 NgIf 和 NgFor 时
FormsModule @angular/forms 当要构建模板驱动表单时(它包含 NgModel )
ReactiveFormsModule @angular/forms 当要构建响应式表单时
RouterModule @angular/router 要使用路由功能,并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
HttpClientModule @angular/common/http 当你要和服务器对话时

如何创建一个模块(基础,掌握)(未完待续)

ng generate module <module-name> //创建一个模块

ng g m <module-name> // 缩写

ng g m order // 创建订单模块

ng g m order --routing // 创建带路由订单模块

angualr模块和js模块有什么区别?(了解)

js模块(ES6 中的模块)

模块功能主要由两个命令构成:export和import,export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能

一般来说,一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 优先考虑下面写法
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName,lastName, year}

export 命令除了可以导出变量,还可以导出函数和类(class)

function a () {...}
function b () {...}

export {
    a,
    b as b_ // 通过as关键字重命名对外接口
}

使用export命令定义了模块的对外接口后,其他js文件就可以通过import命令来加载这个模块了。

// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同

我们也可以对加载的模块进行重命名

import { lastName as surname } from './profile.js';

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// 使用
import * as circle from './circle';

console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14))

这里有一个地方需要注意,模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变,下面的写法都是不允许的

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

angualr模块

angualr模块在文章开头有作介绍(angualr模块概述和angualr模块构成)

NgModule 类 与 JavaScript 模块有下列关键性的不同:

  • NgModule 只绑定了可声明的类,这些可声明的类只是供 Angular 编译器用的。
  • NgModule 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同,只要把该模块的类列在它的 @NgModule.declarations 列表中。
  • NgModule 只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
  • 与 JavaScript 模块不同,NgModule 可以通过把服务提供商加到 @NgModule.providers 列表中,来用服务扩展整个应用。

相比之下我们可以看出,NgModule模块更灵活,扩展性强,更具优势。

模块懒加载

如果我们将所有的模块都导入根模块,那么应用在初始化加载的时候就会非常慢。这时候我们应该考虑使用惰性加载。根据需求加载相应都模块,减少应用初始化包的大小以及减少加载的时间,提高用户体验性。

惰性加载的模块特点是该模块拥有路由模块。因此 接着上面我们创建了一个订单模块 我们给订单模块加上路由。并再创建一个user.module以及user.module模块下的list组件。

ng g m user --routing //创建user模块
ng g c user/list --skip-tests //在user模块里面创建组件list

创建order和user两个模块,list一个组件

<!--order.module 订单模块-->
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; //为一些结构性指令提供支持

import { OrderRoutingModule } from './order-routing.module'; //模块具有自己的路由
import { ListComponent } from './list/list.component'; //引入list组件

@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

配置子路由

<!--order-routing.module 订单模块对应的路由模块-->
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';


const routes: Routes = [ //子路由的组件配置
  {
    path: 'list',
    component: ListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OrderRoutingModule { }

user模块如此类推

配置总路由(重点,掌握)

<!--AppRoutingModule 根路由模块-->
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ //根路由的配置
  {
    path: 'orders',
    loadChildren: './order/order.module#OrderModule' // 配置订单子模块
  },
  {
    path: 'users',
    loadChildren: './user/user.module#UserModule' // 配置用户子模块
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我们给app.component.html新增两个button

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button> //路由跳转
<button routerLink="/order/list">order</button> 

<router-outlet></router-outlet>

惰性加载模块有什么好处呢?

在大型项目中往往有许多个模块,而且大很大。如果一个模块1m,如果我们在浏览器输入地址打开这个应用,瞬间要加载100m 是非常慢的,而且我们并非要是用到着这100个模块。

将系统业务拆分为各个模块,划分好界限。按需加载,我点击了user 就加载user 模块,页面出现user 列表,对user进行操作。当我需要使用时才加载,极大的减少了页面初始加载的时间以及减少了资源的消耗

模块共享

共享模块顾名思义,就是共享于所有的模块中。首先得定义好这个模块的具体功能特性,比如指令、管道和组件等分别封装成一个个模块,哪些业务模块需要使用到其里面的功能便导入其模块中便可。
这极大的规范了系统的统一性和降低了以后的维护成本

如果你引入了第三方UI,就不要把UI引入共享模块中导出,这样你的共享模块越来越庞大。别人UI框架设计的初衷就是按需加载。你把UI组件放到共享模块,加载那些无关的的UI组件,会浪费掉大量的性能。

更多编程相关知识,请访问:编程视频!!

以上就是了解angular10模块相关概念,快速入门!的详细内容!