Komponente vs. Modul in Angular

1. Modul in Angular
2. Komponenten in Angular
3. Fazit

Dieser Artikel stellt Komponenten und Module in Angular vor und diskutiert ihre Unterschiede.

Modul in Angular

Das Modul ist ein vollständiges Feature unserer Anwendung.

Beispielsweise ist die Benutzerauthentifizierung eine vollständige Funktion, die Benutzeranmeldung, Registrierung und Authentifizierung (Passwort vergessen und E-Mail-Adresse bestätigen) umfasst. Daher ist die Benutzerauthentifizierung ein Modul unserer Anwendung.

Wenn wir eine Gruppe von Funktionen haben, die miteinander in Beziehung stehen, genau wie die Benutzerauthentifizierung, enthält das Modul eine oder mehrere Komponenten, Dienste und Pips.

Zum Beispiel haben wir drei Komponenten login, register und forget a password in der Benutzerauthentifizierung. Unser Dienst wird ein API-Aufruf bei der Benutzerauthentifizierung sein, und Pips werden Helfer sein.

Die Kombination dieser verschiedenen Funktionalitäten, die miteinander in Beziehung stehen, ergibt also ein Modul in unserer Angular-Anwendung.

Lassen Sie uns nun eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Dann öffnen wir die Datei app.module.ts.

# angular
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Wie Sie im obigen Code sehen können, haben wir NgModule und BrowserModule in unser App-Modul importiert. Wir haben auch eine Komponente, AppComponent, importiert.

Wenn wir jedoch mehr Komponenten in unsere Module importieren möchten, können wir Deklarationen verwenden, um unsere Komponenten in unserem Modul zu registrieren. Wenn wir ein anderes Modul importieren, können wir imports verwenden.

Mit dem folgenden Befehl können wir ganz einfach neue Module in unserer Angular-Anwendung erstellen.

# angular
ng generate module user-auth

Dieser Befehl erstellt einen neuen Ordner im App-Ordner und erstellt ein neues Modul, wie unten gezeigt.

Ausgabe:

Komponenten in Angular

Die Komponente ist ein Stück Code, das für eine bestimmte Aufgabe erstellt wurde.

Wenn wir beispielsweise möchten, dass sich Benutzer selbst registrieren, können wir eine neue Komponente namens register erstellen, die es Benutzern ermöglicht, sich in unserer Anwendung zu registrieren.

Komponenten können je nach Bedarf dort wiederverwendet werden, wo sie wiederverwendet werden können. Wenn wir beispielsweise Kopf- und Fußzeilen auf allen unseren Webseiten in der Angular-Anwendung verwenden möchten, können wir header und footer erstellen und diese Komponenten importieren, wo immer wir sie verwenden möchten.

Eine Komponente besteht aus 4 Dateien:

1. CSS-Datei, die zum Schreiben von Stilen für die Komponente verwendet wird.
2. HTML-Datei, die zum Schreiben des Frontends oder der Ansicht unserer Komponente verwendet wird.
3. Specs-Datei, die zum Schreiben von Testfällen verwendet wird.
4. Komponentendatei, in die wir den logischen Teil unserer Komponente schreiben, der Funktionen, API-Aufrufe usw. enthält.

Lassen Sie uns nun eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Dann öffnen wir die Datei app.component.ts.

# angular
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "App Component";
}

Wie Sie im obigen Code sehen können, haben wir eine component-Methode aus @angular/core importiert. Jetzt können wir selector, templateUrl und styleUrls für unsere Komponente definieren, indem wir die soeben importierte component verwenden.

Der Selektor ist ein Tag, mit dem der Inhalt unserer Komponente in unserer Angular-Anwendung angezeigt wird.

Wenn wir aus dem obigen Code ein Tag <app-root></app-root> in unserer index.html-Datei erstellen, erkennt die Angular-Anwendung das Tag und ersetzt es durch den Inhalt unserer Komponente.

templateUrl wird verwendet, um das Template für unsere Komponente zu definieren. Und styleUrls definiert die CSS-Datei für unsere Komponente, in der Stile geschrieben werden.

Mit dem folgenden Befehl können wir ganz einfach neue Komponenten in unserer Angular-Anwendung erstellen.

# angular
ng generate component login

Dieser Befehl erstellt 4 neue Dateien mit einem neuen Selektor für unsere Komponente.

Ausgabe:

Fazit

In diesem Tutorial haben wir etwas über Module und Komponenten in Angular gelernt, wie man neue Komponenten erstellt, ihre Methoden versteht und woraus sie bestehen.