[MUSIK]
Wir haben gerade unsere erste Angular Anwendung in der vorherigen Übung erstellt.
Sie müssen sich fragen, wie sieht eine typische Angular-Anwendung aus?
Was ist seine Struktur und Architektur und
wie erstellen wir eine Angular-Anwendung?
Lassen Sie uns Schritt für Schritt über diese Dinge sprechen, beginnend mit diesem Vortrag. Werfen Sie
einen kurzen Blick auf den Anwendungsordner, in einem Editor.
Sie bemerken sofort, dass die Angular CLI eine ganze Reihe von
Dateien in verschiedenen Ordnern in unserer Anwendung erstellt hat.
Was enthalten diese Dateien?
Wie stellen sie eine Angular-Anwendung dar?
Lassen Sie uns sie Schritt für Schritt untersuchen, um die typische Architektur
einer Angular-Anwendung zu verstehen.
Wie wir bereits erkannt haben,
werden Angular-Anwendungen als eine Kombination
aus HTML und entweder TypeScript oder JavaScript erstellt.
In diesem Kurs werden wir TypeScript als Sprache der Wahl für die
Erstellung unserer Angular-Anwendung verwenden.
Angular selbst besteht aus mehreren Bibliotheken,
von denen einige Bibliotheken genannt werden, und andere sind optionale Bibliotheken.
Abhängig von der Art einer Angular-Anwendung, die Sie erstellen möchten,
werden Sie einige davon in Ihre Anwendung aufnehmen.
Wie wir bereits gelernt haben, ist Angular ein JavaScript-Framework und
wir werden das nutzen, um unsere Anwendung zu erstellen.
Zusammenfassend ist die Angular Anwendung modular in ihrer Natur und besteht aus
mehreren Komponenten zusammen mit ihren Vorlagen, die die Anwendung umfassen.
Nicht nur das, diese Komponenten und andere Teile der Angular-Anwendung,
wie Dienste, werden in Modulen organisiert.
Und diese Module werden wiederum von höheren Modulen verwendet.
So können Sie eine Angular-Anwendung als modulare
Architektur mit einem Root-Modul an der Spitze betrachten, das
die Hilfe anderer Module übernimmt, die in Ihrer Modellierungshierarchie organisiert sind.
Lassen Sie uns unsere Anwendung untersuchen, um zu verstehen, wie dies erstellt wird.
Bevor wir fortfahren, wird das Root-Modul standardmäßig
in Angular typischerweise als App-Modul bezeichnet.
Gehen wir zu unserem Code, beginnen wir unsere Reise und index.html.
Also in dieser index.html Datei können Sie sehen, dass wir den typischen HTML-Code hier haben,
zusammen mit dieser bestimmten Zeile, die app-root sagt.
Sie erkennen sie sofort, dass dies nicht wie ein typisches HTML-Tag aussieht.
Lassen Sie uns also beginnen, uns die Frage zu stellen, wofür das steht und
warum ist das auf der Seite index.html enthalten?
Wie wir bereits gesehen haben,
ist eine typische Angular-Anwendung eine Hierarchie von Modulen mit einem Root-Modul.
Ihre Angular-Anwendung wird durch Bootstrapping des Root-Moduls
gestartet, um Ihre Anwendung zu starten.
Wie booten wir eine Angular-Anwendung?
Wir haben bereits die Seite index.html gesehen, und Sie haben dort ein Element namens app-root gesehen.
Stellen wir uns also noch ein paar Fragen.
Ein Begleiter der Seite index.html ist die Datei main.ts.
Wenn Sie diese Datei öffnen, sehen Sie, dass sie eine Reihe
von Importanweisungen in TypeScript enthält, wie hier geschrieben.
Lassen Sie uns nicht zu viel in die Details eintauchen, aber
ich werde zurückkommen, um dies in kurzer Zeit zu erklären.
Aber insbesondere
lassen Sie mich Ihre Aufmerksamkeit auf diese bestimmte Zeile in der Datei main.ts lenken.
Was sagt PlatformBrowserDynamic () .bootStrapModule
und notieren Sie dann den Parameter hier, der sagt (AppModule).
Wie ich bereits erwähnt habe, ist das App-Modul früher der typische
Name, der dem Root-Modul in einer Angular-Anwendung gegeben wird.
Wenn Sie sich die Dateihierarchie ansehen,
sehen Sie dort bereits eine Datei namens app_module.ts.
Wir werden diese Datei in kurzer Zeit besuchen, um zu sehen, was sie enthält.
Nun, wenn Sie auf diese Importe zurückkommen,
können Sie sehen, dass wir das Beispiel des ersten Imports hier nehmen.
Es sagt, Import EnableProdMode von '@angular /core'.
Was das angibt, ist, dass wir dieses spezielle
Modul aus der Angular Core-Bibliothek importieren.
Und in ähnlicher Weise sehen Sie den zweiten, der sagt, platformBrowserDynamic
von '@angular /platform-browser-dynamic' importieren.
Also aus dieser Bibliothek importieren Sie dieses Modul an Ort und Stelle. Mit
dem PlatformBrowserDynamic-Modul können Sie nun
Ihre Angular-Anwendung booten, indem Sie Ihr Root-Modul als Parameter verwenden.
Offensichtlich gibt es viele andere Dateien in diesem Ordner und die Unterordner dort.
Sorgen wir uns im Moment nicht zu sehr um sie.
Wir werden über einige von ihnen lernen, während wir in diesem Kurs gehen.
Nun hilft Angular CLI, diese Hierarchie von Ordnern und
Dateien
zu erstellen, mit den notwendigen Einstellungen, damit Sie Ihre Winkelanwendung booten und loslegen können.
Dies von Hand zu tun ist eine etwas mühsame Aufgabe.
So vereinfacht die Angular CLI die Vorbereitung
des Ordners für Ihre Angular-Anwendung.
Also wieder, gehen Sie zur Datei app_module.ts.
Wie ich bereits erwähnt habe, ist dies das Root-Modul für Ihre Angular-Anwendung.
Nun würde das Root-Modul normalerweise als app.module-Datei benannt werden,
aber das ist nur ein empfohlener Name in Angular.
Sie werden sehen, dass viele der Dateien, die eine Angular-Anwendung bilden,
gibt es vorgeschlagene Möglichkeiten, diese Dateien zu benennen.
Während wir den Kurs durchlaufen, werden wir spezifisch über jede dieser
Dateien lernen. Wenn Sie
also einen Blick auf den Inhalt von app_module.ts werfen,
sehen Sie dort eine Reihe von Importanweisungen. Bei
einem kurzen Blick auf sie heißt import {browserModule} von
'@angular -platform-browser'.
Importieren Sie {ngModule} aus '@angular /core'.
Und NGModule ist ein Winkelmodul.
Wir werden ein wenig mehr darüber erfahren.
Darüber hinaus sehen Sie hier eine weitere Importanweisung,
die heißt import {appComponent} von '. /app.component '.
Und wenn Sie sich die Dateien hier ansehen,
sehen Sie bereits eine app.component.tsfileware und
dann mehrere andere Dateien hier, darunter eine app.component card.html,
eine app.component.acss und andere Dateien.
Nun gibt diese Anweisung an, dass dieses Root-Modul diese Komponente enthält
und das Root-Kompliment Ihrer Angular-Anwendung bildet.
Eine typische Angular-Anwendung besteht, wie wir gesehen haben, aus einer Reihe von
Modulen mit dem Root-Modul als Primärmodul,
das Ihnen hilft, Ihre Angular-Anwendung zu booten.
Das Root-Modul ist ein Angular-Modul mit einem Feature oder eine Klasse.
Hier sehen Sie also die Verwendung einer TypeScript-Klasse hier.
Wenn Sie also unten in das rote Modul unten unten gehen, sehen Sie
diese Anweisung namens Exportklasse AppModule.
TypeScript fügt Klassen zu Ihrem typischen JavaScript-Code hinzu.
Wenn Sie nur mit ES-5-JavaScript vertraut sind,
wurden dort noch keine Klassen eingeführt, aber
die neueren Versionen von JavaScript werden Unterstützung für Klassen einführen.
TypeScript bietet auch Unterstützung für Klassen.
Wenn Sie also Erfahrung mit objektorientierter Programmierung haben,
sind Sie bereits mit Klassen vertraut.
So wird diese Art von Ansatz in JavaScript mit der Einführung
von Klassen in TypeScript und zukünftigen Versionen von JavaScript gebracht.
Außerdem werden Sie feststellen, dass dieser Klasse
einen Ngmodule Dekorator zugeordnet ist.
Ein Dekorator ist also wieder eine Funktion,
die JavaScript-Klassen ändert.
Wir werden die Verwendung von Dekorateuren an vielen Stellen in unserer Angular Anwendung sehen.
Dies ist ein Ngmodule. Mit
dem Dekorator können Sie einige Details zu diesem
App-Modul angeben.
Diese Decorator-Funktion benötigt also einen bestimmten Satz
von Metadaten, um Ihnen zu helfen, dieses Modul zu beschreiben.
Dieses Metadatenobjekt enthält hier, wie Sie sehen können,
Deklarationen, Importe, Provider, Bootstrap.
Und enthält auch Exporte, wenn dieses Modul etwas exportiert, das
von einem anderen Modul verwendet werden kann.
Da dies das Root-Modul ist, haben wir keinen Export von diesem Modul.
Stattdessen haben wir nur Deklarationen, Importe, Provider und Bootstrap.
Also hier ist dieser ziemlich einfach zu verstehen.
Es gibt an, dass, um diese Angular-Anwendung zu booten,
müssen wir die AppComponent booten.
Die AppComponent ist also die Stammkomponente unserer Angular-Anwendung.
Darüber hinaus gibt der Import-Teil die Eigenschaften an,
da alle diese Module importiert werden müssen, um mit diesem App-Modul verwendet werden zu können.
Dieses App-Modul hängt nun von diesen anderen Modulen ab.
Dies sind also die Module, die als
Teil der Hierarchie in das App-Modul importiert werden, daher der Grund, warum wir diese Module hier oben importiert haben.
Wenn Sie also die Module importieren,
geben Sie hier an, dass das App-Modul dieses Modul nutzen wird.
Die import-Eigenschaft gibt also jene Module an, die importiert werden müssen, oder
jene Module, von denen dieses spezielle Modul abhängig ist.
Die Deklarationen hier, die Deklarationseigenschaft,
ist die Eigenschaft, die die Ansichtsklassen deklariert
, die zu diesem bestimmten Modul gehören.
Die Ansichtsklassen im Falle eines Angular-Moduls
wären also in Form von Komponenten, Direktiven und Pipes.
Wir werden ein wenig später in diesem Kurs über Direktiven und
Pipes sprechen, wir werden in der nächsten Lektion über Komponenten sprechen.
Die Anbieter geben alle Dienste an, die dieses
spezielle Modul nutzen wird.
Dienstleistungen, über die wir im
Modul der nächsten Woche etwas ausführlicher sprechen werden.
Wir werden mehr Details über Dienste sprechen, wie wir sie erstellen
und wie wir sie mit unserer Angular-Anwendung nutzen können.
Um zusammenzufassen, was wir bisher gelernt haben, erkennen wir, dass ein Modul
in einer Angular-Anwendung aus einer Reihe von Komponenten und
Diensten bestehen könnte, die von diesem Modul benötigt werden, indem sie sie importieren.
Und diese werden mit der Deklarationseigenschaft
des Ngmodule Dekorators in unserem App-Modul deklariert.
Nun können diese Komponenten selbst von
anderen Komponenten oder Diensten oder Direktiven oder
Pipes abhängig sein, wie wir im Rest dieses speziellen Kurses sehen werden.
Damit haben wir eine grobe Vorstellung davon, wie eine typische Angular-Anwendung strukturiert ist. Wenn
Sie zu unserem Code zurückkehren, ist es jetzt an der Zeit,
diese Datei app.component.ts und die Datei app.component.html zu untersuchen. Das
deklariert die Vorlage für unsere Komponente,
und die app.component.ts Datei,
die den TypeScript-Teil unserer Komponente angibt.
Nun werden wir das in der nächsten Lektion tun, wo wir uns mit Komponenten beschäftigen und
wie wir neue Komponenten erstellen und sie zu unserer Angular-Anwendung hinzufügen können.
( MUSIK)