Was ist der Unterschied zwischen einer Winkelkomponente und einem Modul?

Ich habe Videos gesehen und Artikel gelesen, aber dieser spezielle Artikel macht mich am Anfang des Artikels so verwirrt

Die Anwendungen in Angular folgen einem modularen Aufbau. Die Angular-Apps enthalten viele Module, die jeweils dem jeweiligen Zweck gewidmet sind. In der Regel ist das Modul eine zusammenhängende Codegruppe, die in die anderen Module integriert ist, um Ihre Angular-Apps auszuführen.

Ein Modul exportiert einige Klassen, Funktionen und Werte aus seinem Code. Die Komponente ist ein grundlegender Block von Angular und mehrere Komponenten bilden Ihre Anwendung.

Ein Modul kann eine Bibliothek für ein anderes Modul sein. Beispielsweise wird die Angular2 / Core-Bibliothek, die ein primäres Angular-Bibliotheksmodul ist, von einer anderen Komponente importiert.

Sind sie austauschbare Begriffe? Ist eine Komponente ein Modul? Aber nicht umgekehrt?

Komponenten steuern Ansichten (HTML). Sie kommunizieren auch mit anderen Komponenten und Diensten, um Funktionen für Ihre App bereitzustellen.

Module bestehen aus einer oder mehreren Komponenten. Sie kontrollieren kein HTML. Ihre Module deklarieren, welche Komponenten von Komponenten anderer Module verwendet werden können, welche Klassen vom Abhängigkeitsinjektor injiziert werden und welche Komponente gebootet wird. Mit Modulen können Sie Ihre Komponenten verwalten, um Ihrer App Modularität zu verleihen.

Nun, es ist zu spät, um eine Antwort zu schreiben, aber ich denke, es wird leicht zu verstehen sein, wer Anfänger mit Angular sind. Das Folgende ist eines der Beispiele, die ich während meiner Präsentation gebe.

Betrachten Sie Ihre eckige Anwendung als Gebäude. Ein Gebäude kann Nmehrere Wohnungen enthalten. Eine Wohnung gilt als Modul. Eine Wohnung kann dann eine NAnzahl von Räumen haben, die den Bausteinen einer Angular-Anwendung mit dem Namen Komponenten entsprechen.

Jetzt verfügt jede Wohnung (Modul) über Räume (Komponenten), Aufzüge (Dienstleistungen), um eine größere Bewegung in die Wohnungen hinein und aus ihnen heraus zu ermöglichen, Drähte (Rohre), um Informationen zu bewegen und sie in den Wohnungen nützlich zu machen.

Sie werden auch Orte wie Schwimmbad, Tennisplatz haben, die von allen Bewohnern des Gebäudes geteilt werden. Diese können also als Komponenten in SharedModule betrachtet werden.

Grundsätzlich ist der Unterschied wie folgt:

Folgen Sie meinen Folien, um die Bausteine ​​einer Angular-Anwendung zu verstehen

Hier ist meine Sitzung am Building Blocks of Angular for beginners

Einfachste Erklärung:

Das Modul ist wie ein großer Container, der einen oder mehrere kleine Container enthält, die als Komponente, Service, Rohr bezeichnet werden

Eine Komponente enthält:

• HTML-Vorlage oder HTML-Code

• Code (TypeScript)

• Service: Es handelt sich um einen wiederverwendbaren Code, der von den Komponenten gemeinsam genutzt wird, sodass kein Umschreiben des Codes erforderlich ist

• Pipe: Es nimmt Daten als Eingabe auf und wandelt sie in die gewünschte Ausgabe um

.

Winkelkomponente

Eine Komponente ist einer der Grundbausteine ​​einer Angular-App. Eine App kann mehr als eine Komponente haben. In einer normalen App enthält eine Komponente eine Klassendatei für eine HTML-Ansichtsseite, eine Klassendatei, die das Verhalten der HTML-Seite steuert, und die CSS / scss-Datei, um Ihre HTML-Ansicht zu formatieren. Eine Komponente kann mit dem @ComponentDekorator erstellt werden , der Teil des @angular/coreModuls ist.

import { Component } from '@angular/core';

und um eine Komponente zu erstellen

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Um eine Komponente oder eine Winkel-App zu erstellen, finden Sie hier das Tutorial

Winkelmodul

Ein Winkelmodul besteht aus eckigen Grundbausteinen wie Komponenten , Anweisungen , Diensten usw. Eine App kann mehr als ein Modul haben.

Ein Modul kann mit dem @NgModuleDekorator erstellt werden .

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

Ein Modul in Angular 2 besteht aus Komponenten, Anweisungen, Diensten usw. Ein oder mehrere Module bilden zusammen eine Anwendung. Module teilen die Anwendung in logische Codeteile auf. Jedes Modul führt eine einzelne Aufgabe aus.

Komponenten in Angular 2 sind Klassen, in denen Sie Ihre Logik für die Seite schreiben, die Sie anzeigen möchten. Komponenten steuern die Ansicht (HTML). Komponenten kommunizieren mit anderen Komponenten und Diensten.

Ein Bild sagt mehr als tausend Worte !

Das Konzept von Angular ist sehr einfach. Es wird vorgeschlagen, eine App mit "Steinen" -> Modulen zu "erstellen" .

Dieses Konzept ermöglicht es, den Code besser zu strukturieren und die Wiederverwendung und Freigabe zu erleichtern.

Verwechseln Sie die Angular-Module nicht mit den ES2015 / TypeScript-Modulen.

In Bezug auf das Winkelmodul ist es ein Mechanismus für:

1-Gruppen-Komponenten (aber auch Dienste, Anweisungen, Rohre usw.)

2- Definieren Sie ihre Abhängigkeiten

3- definieren Sie ihre Sichtbarkeit.

Ein Winkelmodul wird einfach mit einer Klasse (normalerweise leer) und dem NgModule-Dekorator definiert.

Komponente ist the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Module, basically group the related components, services togetherdamit Sie Funktionsblöcke haben, die dann unabhängig voneinander ausgeführt werden können. Beispielsweise kann eine App Module für Funktionen enthalten, um Komponenten für eine bestimmte Funktion Ihrer App zu gruppieren, z. B. ein Dashboard, das Sie einfach abrufen und in einer anderen Anwendung verwenden können.