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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7455

15

CakePHP-Tutorial

1375

52

Wie lautet das Format des Kontonamens von Steam?

77

11

Win11 -Aktivierungsschlüssel dauerhaft

40

19

NYT -Verbindungen Hinweise und Antworten

14

9

Mehr anzeigen

Related knowledge

WLAN-Erweiterungsmodul ist gestoppt [Fix] Feb 19, 2024 pm 02:18 PM

Wenn es ein Problem mit dem WLAN-Erweiterungsmodul Ihres Windows-Computers gibt, kann dies dazu führen, dass Sie nicht mehr mit dem Internet verbunden sind. Diese Situation ist oft frustrierend, aber glücklicherweise enthält dieser Artikel einige einfache Vorschläge, die Ihnen helfen können, dieses Problem zu lösen und Ihre drahtlose Verbindung wieder ordnungsgemäß funktionieren zu lassen. Behebung, dass das WLAN-Erweiterbarkeitsmodul nicht mehr funktioniert Wenn das WLAN-Erweiterbarkeitsmodul auf Ihrem Windows-Computer nicht mehr funktioniert, befolgen Sie diese Vorschläge, um das Problem zu beheben: Führen Sie die Netzwerk- und Internet-Fehlerbehebung aus, um drahtlose Netzwerkverbindungen zu deaktivieren und wieder zu aktivieren. Starten Sie den WLAN-Autokonfigurationsdienst neu. Ändern Sie die Energieoptionen. Ändern Erweiterte Energieeinstellungen Netzwerkadaptertreiber neu installieren Einige Netzwerkbefehle ausführen Schauen wir uns das nun im Detail an

Das WLAN-Erweiterungsmodul kann nicht gestartet werden Feb 19, 2024 pm 05:09 PM

In diesem Artikel werden Methoden zur Behebung des Ereignisses ID10000 beschrieben, das darauf hinweist, dass das WLAN-Erweiterungsmodul nicht gestartet werden kann. Dieser Fehler kann im Ereignisprotokoll des Windows 11/10-PCs erscheinen. Das WLAN-Erweiterbarkeitsmodul ist eine Komponente von Windows, die es unabhängigen Hardwareanbietern (IHVs) und unabhängigen Softwareanbietern (ISVs) ermöglicht, Benutzern angepasste Features und Funktionen für drahtlose Netzwerke bereitzustellen. Es erweitert die Funktionalität nativer Windows-Netzwerkkomponenten durch Hinzufügen von Windows-Standardfunktionen. Das WLAN-Erweiterungsmodul wird im Rahmen der Initialisierung gestartet, wenn das Betriebssystem Netzwerkkomponenten lädt. Wenn beim WLAN-Erweiterungsmodul ein Problem auftritt und es nicht gestartet werden kann, wird möglicherweise eine Fehlermeldung im Protokoll der Ereignisanzeige angezeigt.

So installieren Sie Angular unter Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js ist eine frei zugängliche JavaScript-Plattform zum Erstellen dynamischer Anwendungen. Es ermöglicht Ihnen, verschiedene Aspekte Ihrer Anwendung schnell und klar auszudrücken, indem Sie die Syntax von HTML als Vorlagensprache erweitern. Angular.js bietet eine Reihe von Tools, die Sie beim Schreiben, Aktualisieren und Testen Ihres Codes unterstützen. Darüber hinaus bietet es viele Funktionen wie Routing und Formularverwaltung. In dieser Anleitung wird erläutert, wie Angular auf Ubuntu24 installiert wird. Zuerst müssen Sie Node.js installieren. Node.js ist eine JavaScript-Ausführungsumgebung, die auf der ChromeV8-Engine basiert und es Ihnen ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In Ub sein

Eine kurze Analyse der Verwendung des Monaco-Editors in Angular Oct 17, 2022 pm 08:04 PM

Wie verwende ich den Monaco-Editor in Angular? Der folgende Artikel dokumentiert die Verwendung des Monaco-Editors in Angular, der kürzlich in einem Unternehmen verwendet wurde. Ich hoffe, dass er für alle hilfreich sein wird!

Ein Artikel über serverseitiges Rendering (SSR) in Angular Dec 27, 2022 pm 07:24 PM

Kennen Sie Angular Universal? Es kann dazu beitragen, dass die Website eine bessere SEO-Unterstützung bietet!

Python verwendet häufig Standardbibliotheken und Bibliotheken von Drittanbietern im 2-SYS-Modul Apr 10, 2023 pm 02:56 PM

1. Einführung in das SYS-Modul Das zuvor vorgestellte OS-Modul ist hauptsächlich für das Betriebssystem gedacht, während das SYS-Modul in diesem Artikel hauptsächlich für den Python-Interpreter gedacht ist. Das sys-Modul ist ein Modul, das mit Python geliefert wird. Es ist eine Schnittstelle für die Interaktion mit dem Python-Interpreter. Das sys-Modul bietet viele Funktionen und Variablen für den Umgang mit verschiedenen Teilen der Python-Laufzeitumgebung. 2. Häufig verwendete Methoden des sys-Moduls Sie können mithilfe der dir()-Methode überprüfen, welche Methoden im sys-Modul enthalten sind: import sys print(dir(sys))1.sys.argv – Rufen Sie die Befehlszeilenparameter sys ab. argv wird verwendet, um den Befehl von außerhalb des Programms zu implementieren. Dem Programm werden Parameter übergeben und es kann die Befehlszeilenparameterspalte abrufen

Wie man PHP und Angular für die Frontend-Entwicklung verwendet May 11, 2023 pm 04:04 PM

Mit der rasanten Entwicklung des Internets wird auch die Front-End-Entwicklungstechnologie ständig verbessert und iteriert. PHP und Angular sind zwei Technologien, die in der Frontend-Entwicklung weit verbreitet sind. PHP ist eine serverseitige Skriptsprache, die Aufgaben wie die Verarbeitung von Formularen, die Generierung dynamischer Seiten und die Verwaltung von Zugriffsberechtigungen übernehmen kann. Angular ist ein JavaScript-Framework, mit dem Single-Page-Anwendungen entwickelt und komponentenbasierte Webanwendungen erstellt werden können. In diesem Artikel erfahren Sie, wie Sie PHP und Angular für die Frontend-Entwicklung verwenden und wie Sie diese kombinieren

Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Sep 08, 2022 pm 08:29 PM

Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!

See all articles

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved