Verstehen Sie die Konzepte im Zusammenhang mit Angular10-Modulen und legen Sie schnell los!

Dieser Artikel gibt Ihnen eine Einführung in die Module in angular10. Er stellt die Modulzusammensetzung, ngModule-Attribute, häufig verwendete Module, den Unterschied zwischen Angualr-Modulen und JS-Modulen sowie das verzögerte Laden von Modulen vor zusammen.

Modulübersicht

Das NgModule-Modul ist ein wichtiger Punkt in Angular, da der Grundbaustein von Angular NgModule ist. NgModule sammelt verwandte Codes (Komponenten, Anweisungen, Dienste) in einigen Funktionssätzen, um Funktionseinheiten zu bilden. Man kann sagen, dass Module einen Kompilierungskontext für Komponenten, Anweisungen und Dienste bereitstellen. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

Bei Verwendung des Angular CL-Befehls zum Erstellen eines neuen Projekts wird für uns ein Root-Modul mit dem Namen AppModule generiert Root-Modul Die Anwendung kann gestartet werden. Angular-Anwendungen sind modular aufgebaut, basierend auf ihren Funktionen, Funktionen und Eigenschaften. Jedes Modul kann eine beliebige Anzahl anderer Komponenten enthalten.

Modulzusammensetzung (Grundkenntnisse, Beherrschung)

Das Winkelmodul ist eine Klasse mit dem Dekorator @ngModule(), und der Dekorator @ngModule akzeptiert ein Metadatenobjekt. Die Eigenschaften dieses Objekts werden zur Beschreibung des Moduls verwendet.

Deklarationen: Komponenten, Anweisungen, Pipelines deklarieren
• Importe: Abhängigkeiten einführen
• Exporte: Module exportieren
• Anbieter: Dienstregistrierung
• Bootstrap: Host-Komponenten angeben

• 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-Attributerklärung (Verstehen)

Klicken Sie auf die Dekoratorklasse @NgModule() und wir können sehen, dass sie die folgenden Attribute und die offizielle Erklärung ihrer Attribute hat.

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[]>;
}

Detaillierte Erklärung der Attribute

providers: Definieren Sie hier vorab alle in Komponenten dieses Moduls injizierten Dienste, andernfalls kommt es zu einer Fehlermeldung, wenn Sie diesen Dienst in diesem Modul verwenden.

Erklärung: Erklärung bedeutet Erklärung auf Englisch. Deklarieren Sie hier einige Komponenten, Anweisungen, Rohre usw., die in einigen Modulen verwendet werden sollen.

Importe: Importieren Sie einige Module. Wenn ich beispielsweise alle Anweisungen in einem Modul zusammenfasse und einige der Anweisungen verwende, kann ich mich dafür entscheiden, das gesamte Anweisungsmodul zu importieren. Sie können auch einige über npm install installierte Module importieren, bevor sie verwendet werden können.

Exporte: Exportieren Sie Komponenten oder Befehlspipelines usw., sodass Module, die auf dieses Modul verweisen, die Komponenten oder Befehlspipelines dieses Moduls verwenden können.

exporyComponents: Die Einstiegskomponente stellt die Einstiegskomponente von Angular dar. Die bootfähige Komponente ist eine Einstiegskomponente und Angular lädt sie während des Startvorgangs in das DOM. Andere Eintragskomponenten werden zu anderen Zeiten dynamisch geladen. Wörtliche Bedeutung, aber wenn ich es verwenden möchte, zum Beispiel, wenn ich eine Komponente öffnen möchte, muss diese Komponente dynamisch in das DOM geladen werden. Zu diesem Zeitpunkt muss ich diese Komponente xxxComponent schreiben.

bootstrap: Die Komponente, die beim Start dieses Moduls gestartet werden soll. Aus dem obigen Code können Sie ersehen, dass AppModule die Startkomponente des Root-Moduls ist.

Schemas: Elemente oder Attribute, die nicht zu Angular-Komponenten oder -Anweisungen gehören, müssen hier deklariert werden.

Häufig verwendete Module (Grundkenntnisse, Meisterkenntnisse)

NgModuleImportVerwendenBrowserModule@angular/platform-browserWenn Sie die App im ausführen möchten browserCommonModule@angular/commonWenn Sie NgIf und NgFor verwenden möchtenFormsModule@angular/formsWenn Sie vorlagengesteuerte Formulare erstellen möchten (es enthält NgModel) ReactiveFormsModule@angular/formsWenn Sie ein reaktives Formular erstellen möchtenRouterModule@angular/routerUm die Routing-Funktion zu verwenden, müssen Sie RouterLink, .forRoot() und verwenden .forChild() Wenn HttpClientModule@angular/common/httpWenn Sie mit dem Server sprechen möchten

如何创建一个模块（基础，掌握）（未完待续）

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 &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;; //为一些结构性指令提供支持

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

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

配置子路由

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


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

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

user模块如此类推

配置总路由（重点，掌握）

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

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

@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组件，会浪费掉大量的性能。

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Konzepte im Zusammenhang mit Angular10-Modulen und legen Sie schnell los!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!