Eine typische Angular-Anwendung besteht aus vielen Komponenten.
Komponenten steuern einen Teil des Bildschirms, der als Ansicht in Angular aufgerufen wird.
Wenn Sie also Ihren Bildschirm in Ihrer Angular-Anwendung erstellen,
können Sie Ihren Bildschirm in mehrere Ansichten aufteilen,
wobei jede von ihnen durch eine separate Komponente gesteuert wird.
Bisher
haben wir in dem Beispiel eine einzelne Root-Komponente, die den gesamten Bildschirm steuert.
In dieser Lektion werden wir eine weitere Komponente hinzufügen, die Teil des Bildschirms ist und die
Kontrolle über diesen Teil des Bildschirms übernimmt und kümmert sich um
das gesamte Rendering dieses Teils des Bildschirms, hier.
Lassen Sie uns die App-Komponente kurz besuchen, die
wir bereits als Teil unserer Angular-Anwendung haben.
Also, in dieser Komponente
können Sie sehen, dass wir die Komponente aus Angular-Kern importieren.
Dies bietet uns die Möglichkeit,
einen Komponenten-Dekorator zu definieren und ihn auf unsere Klasse anzuwenden.
Dies wird also eine Komponente definieren, die Teil unserer Angular-Anwendung ist.
Also, hier, diese spezielle Komponente,
wie Sie sehen können, wenn Sie den Komponenten-Dekorator definieren,
besteht sie aus mehreren Eigenschaften hier einer von ihnen ist der Selektor, hier.
Nun definiert diese spezielle Selektoreigenschaft hier eine Zeichenfolge.
Beachten Sie insbesondere, was in der Zeichenfolge enthalten ist.
Es steht App-Root.
Jetzt blickt man auf die Datei index.html zurück.
Also, ich gehe zu index.html Datei.
Sie können sehen, dass genau dort,
wir verwenden diese app-root als eines der Tags in unserer index.html Datei.
Also, jetzt sehen Sie, dass dieses bestimmte Tag, das Sie verwenden,
bezieht sich auf den Selektor dessen, was wir hier angegeben haben, app-root.
Wenn Sie also einen Teil des Bildschirms geben und diesen durch eine Komponente steuerbar machen möchten,
verwenden Sie den Selektor, um anzugeben, und fügen Sie dann
das Selektor-Tag in Ihre HTML-Datei ein.
Gleiches gilt auch für die Vorlage einer Komponente.
Wenn Sie einen anderen Selektor aus einer anderen Komponente
in die Vorlage dieser Komponente aufnehmen,
wird dieser Teil des Bildschirms an
die zweite Komponente übergeben, die von der zweiten Komponente gesteuert werden soll.
Darüber werden wir auch in einer der späteren Lektionen lernen.
Nun ist der zweite Teil, den Sie sehen, angegeben wird, templateUrl.
Diese TemplateURL gibt den Namen der Vorlagendatei für diese bestimmte Komponente an.
Also, in diesem Fall, wie Sie sehen können, ist dies app.component.html.
Das ist der Grund, warum die Vorlage in der
Datei app.component.html für diese bestimmte Komponente definiert wird.
Darüber hinaus können Sie auch Stile für diese Anwendung bereitstellen.
Also, hier sagen wir StyleURLs und dann hier,
in eckigen Klammern, geben Sie dieses Sprichwort an. /app.component.scss.
Also, was bedeutet, dass diese bestimmte SaaS-Datei auf diesen Stil angewendet wird.
Wie Sie gesehen haben, als wir unsere Angular-Anwendung erstellt haben,
habe ich auf das Stil-Format angegeben, das ich verwenden werde, ist ein SCSS.
Also, das ist der Grund, warum diese Dateien SCSS sind.
Wenn Sie den Stil SCSS nicht verwenden und stattdessen normal erstellen,
dann wären dies nur CSS-Dateien und dann können Sie CSS verwenden, um
die Stile zu definieren, die in Ihren Anwendungsvorlagen oder in Ihren Komponentenvorlagen verwendet werden können.
Wenn Sie also Komponentenspezifische
Stile haben, die Sie für diese bestimmte Komponente einschließen möchten,
fügen Sie sie in diese Datei ein.
Sie können auch die Vorlage und den Stil inline angeben.
Wenn Sie also den Stil oder die Vorlage inline angeben,
würden Sie dies einfach wie bei hinteren Anführungszeichen angeben.
So kann ich zum Beispiel einfach,
anstatt die TemplateURL
zu tun, kann ich dies einfach als Vorlage bearbeiten und
dann werde ich die Vorlage in hinteren Anführungszeichen definieren.
Also würde ich sagen, und innerhalb der hinteren Qootes kann ich sogar Vorlagen wie diese machen.
Also, ich kann sagen, h1 und dann Titel.
Also, das wäre, was wir als Inline-Vorlage nennen, die wir innerhalb unserer Anwendung verwenden.
Wenn Sie nun Back-Anführungszeichen verwenden,
können Sie auch Dinge wie Dollar Add on
verwenden, um Variablen in Ihren Vorlagen zu verwenden und so weiter.
In diesem speziellen Kurs
werden wir separate Vorlagendateien verwenden
und stattdessen die Vorlagen in diesen HTML-Dateien erstellen.
Ich bevorzuge diese Methode, meine Vorlagen zu definieren, anstatt Inline-Vorlagen zu machen.
Aber wenn Ihre Vorlage sehr einfach ist und nur zwei oder drei Zeilen enthält,
dann verwenden Sie auf jeden Fall eine Inline-Vorlage wie diese in Ihrer Anwendung.
Also, lassen Sie mich es zurück auf meinen ursprünglichen Wert hier ändern.
Das Gleiche für Stile.
Außerdem kann ich einfach Stile sagen und dann in hinteren Anführungszeichen
meine CSS-Klassen in die hinteren Anführungszeichen einschließen.
Obwohl ich, wie ich bereits erwähnt
habe, bevorzuge ich es, sie in separaten Dateien zu behalten, nur um sauberen Code in meinen.ts Dateien hier zu haben.
So haben wir Selektorvorlagen-Stile.
Wir werden auch eine andere namens Modul-ID haben.
Im Moment verwende ich das nicht für meine Komponente,
aber in einigen Fällen müssen Sie die Modul-ID explizit für Ihre Komponente angeben.
Wir werden einige Beispiele dafür ein wenig später sehen.
Darüber hinaus ist eine Komponente nichts anderes als eine JavaScript-Klasse oder eine Type Script-Klasse.
Deshalb sehen Sie hier,
indem Sie eine Klasse definieren, die AppComponent sagt, und dann exportieren Sie diese Klasse.
Der Grund, warum wir den Export hier verwenden,
damit diese Komponente in mein App-Modul importiert werden kann.
Sie haben also gesehen, dass wir dies in mein App-Modul importiert haben.
Wann immer Sie also eine Komponente oder ein Modul in einem anderen Modul in portable machen möchten,
würden Sie hier immer den Export in die Klasse vorangestellt.
Außerdem
sehen wir, dass wir einige lokale Eigenschaften haben, die wir
in unseren Klassen hier definiert haben und diese für meine Vorlage zugänglich wären.
So kann ich diese in meiner Vorlage nutzen.
Also sind die Eigenschaften, die in meiner
component.ts-Datei definiert sind, über meine Vorlagendateien zugänglich.
Wir werden etwas später in einer anderen Lektion über den Datenbindungsaspector sprechen.
Zusammenfassend ist, was wir bisher gelernt haben, dass eine Komponente definiert wird,
indem Sie den Code angeben und auch die entsprechende Vorlage angeben.
So können Sie innerhalb des Codes Eigenschaften und Methoden definieren
, auf die von Ihrer Vorlage aus der entsprechenden Vorlage zugegriffen werden kann.
Wie Sie also gesehen haben, haben
Sie in den Metadaten, im Dekorator, im Komponentendekorator den Vorlagendateinamen als eine
der Eigenschaften für Ihre Komponentenklasse hier angegeben.
In ähnlicher Weise können alle Eigenschaften und Methoden, die Sie in
Ihrer Komponente definieren, über die Vorlage aufgerufen werden.
Nicht nur das, Sie können auch das, was als
Ereignisbindung bezeichnet wird, von Ihrer Vorlage zurück zu Ihren Komponenten haben.
Also, wenn irgendwelche Ereignisse in Ihren Vorlagen generiert werden, so zum Beispiel,
klicken Sie auf eine Schaltfläche in Ihrer Vorlage, die
Aufrufe von Methoden in Ihrem Code hier auslösen kann,
das Javascript oder den Type Script-Code hier.
Wir werden die Verwendung dieser in einem der späteren Lektionen sehen und dann werde ich wieder
diesen Punkt über Eigenschaftsbindung und Ereignisbindung nochmals nochmals
aufgreifen und Ihnen dies etwas genauer erklären.
Die Komponenten in einer Angular-Anwendung können selbst in einer Hierarchie organisiert werden.
Also, Sie werden immer eine Root-Komponente haben.
Für unsere Anwendung
bilden also die Datei app.component.ts und die entsprechende HTML-Vorlage die Stammkomponente für unsere Anwendung
und diese Root-Komponente kann dann
Komponenten in einer Hierarchie enthalten und Komponenten in die Hierarchie aufnehmen.
Wir werden das in der nächsten Übung sehen,
wo wir eine andere Komponente erstellen und diese dann in unserer Root-Komponente verwenden werden.
Sie können also mehrere Komponenten
in Ihre Stammkomponente einbeziehen, und diese Komponenten
selbst können wiederum andere Komponenten verwenden, die in ihnen enthalten sind.
Diese Hierarchie von Komponenten ermöglicht es Ihnen, den Bildschirm Ihrer Anwendung zu entwerfen.
Mit diesem schnellen Verständnis der Komponenten
und wie Komponenten für die Gestaltung unserer Anwendung nützlich sind,
gehen wir nun zu unserer nächsten Übung, wo wir
eine weitere Komponente zu unserer Angular-Anwendung erstellen und hinzufügen
und dann werden wir eine Vorlage für diese Komponente definieren und dann werden wir nutzen Sie
diese Komponente in unserer Root-Komponente, um unseren Bildschirm zu entwerfen.