Angular-Komponenten

Name: Angular-Komponenten
Author: Michaela Ochnich

Sie lernen die Funktionen der Komponenten, die Verwendung des Komponentendekorators und die Anzeige von Daten in der Komponentenvorlage

Preview the first lesson free — get full access to all 5 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

Hallo, diese Lektion wird vorstellen was eine Angular-Komponente ist, und wie man eine mit der Angular CLI erstellt. Komponenten sind die Grundlage des Angular-Frameworks. Eine Komponente ist ein Teil der Anwendung, wie eine Navigationsleiste, oder eine seitliche Navigationsleiste. Es könnte ein Suchfeld sein, oder vielleicht ein Anmeldeformular. Komponenten sind die verschiedenen Teile die Ihre Anwendung aufbauen, Bereitstellung sowohl einer Ansicht für die Benutzer, mit der sie interagieren können, als auch und eine Klasse, um auf Ereignisse zu reagieren, und handhabe die Daten und die Logik. Die Klasse steuert die Komponentenlogik und das Verhalten, und die Vorlage legt fest, wie sie auf dem Bildschirm gerendert wird für den Benutzer. Die Komponentenklasse und Vorlage sind in der Lage, mithilfe von Bindungen zu interagieren und Informationen auszutauschen. Die Eigenschaftsbindung ermöglicht der Klasse um Daten an die Vorlage zu übergeben, um sie dem Benutzer anzuzeigen. Wenn der Benutzer Daten in der Ansicht ändert, Ereignisbindung kann verwendet werden, um ein Ereignis auszulösen das aktualisiert die Daten in der Klasse. Metadaten bieten zusätzliche Konfigurationsinformationen für die Komponentenklasse. Komponenten werden mit einer Eigenschaft namens Selektor benannt das ist in den Metadaten festgelegt. Der Selektor wird verwendet, um Angular wo in der Anwendung diese Komponente erstellt und gezeigt werden soll. Mit dem Selektor, Sie können Komponenten einbetten, und andere Komponentenvorlagen beginnend mit dieser Wurzelkomponente, die die gesamte Angular-Anwendung enthält. Diese eingebetteten Komponenten haben Eltern/Kind-Beziehungen die es ihnen ermöglichen, zu interagieren und Daten weiterzugeben. Eine untergeordnete Komponente ist in eine übergeordnete Komponente eingebettet. Hier ist also die Wurzelkomponente die übergeordnete Komponente, und dann hat es zwei untergeordnete Komponenten, A und B. Komponente A ist hier die übergeordnete Komponente zu dieser Komponente hier unten, die Enkelkomponente. Diese Komponente ist ein Enkel der Wurzelkomponente da es das untergeordnete Element einer der untergeordneten Komponenten des Stamms ist. Um nun eine Komponente zu erstellen, ein Terminalfenster öffnen, und Sie möchten sicherstellen, dass Sie sich im richtigen Verzeichnis befinden. Sie möchten im Stammordner sein Ihrer Angular-Anwendung. Für mich ist das der Komponentenordner hier. Dann der Befehl zum Erstellen einer neuen Komponente ist von der Generierungskomponente, und dann den Komponentennamen. Dann können Sie aus der gedruckten Ausgabe sehen dass vier neue Dateien erstellt wurden, und die Datei app.module wurde geändert. In der Moduldatei, Sie können sehen, dass die Komponente hier oben automatisch importiert wird. und deklariert es dann für die Verwendung im Modul hier unten. Das CLI-Tool übernimmt diesen Schritt beim Generieren des Bauteils. Wenn Sie also Ihre Komponentendateien manuell erstellen, Vergiss nicht, sie hier anzugeben, oder die App wird mit Fehlern kompiliert. Der Komponentenordner befindet sich hier in diesem Hauptanwendungsordner. und es gibt vier Dateien, die von der CLI erstellt wurden. Diese erste TypeScript-Datei hier wird zum Schreiben von Tests für die Komponente verwendet. Diese zweite TypeScript-Datei hier ist das für die Klasse. Hier ist der Dekorator, der diese Klasse als Komponente markiert: und die Metadaten, um es zu konfigurieren. Wir werden dies in der nächsten Lektion ausführlicher behandeln, aber merken Sie sich hier den Namen des Selektors. Dies ist, was Sie benötigen, um diese Komponente zur App hinzuzufügen. Wenn Sie die HTML-Datei der Komponente öffnen, Sie können sehen, dass es mit diesem Absatz-Tag hier beginnt das besagt, dass die Komponente funktioniert. Und wenn Sie dann die CSS-Datei hier öffnen, dieser beginnt leer, aber wir können schnell eine Regel schreiben, um die Schriftfarbe zu ändern dieses Absatz-Tags. Um diese Komponente nun in der App anzuzeigen, Öffnen Sie die Datei app.component.html, Dies ist die Vorlagendatei für die Root-Komponente. Hier können Sie den gesamten Starter-Vorlagencode löschen. Und dann füge ich nur noch schnell ein h1-Tag hinzu das sagt meine Angular Application. Um dann die neue Komponente hinzuzufügen, schreibe ein Tag mit dem Selektor die für die Komponente eingestellt wurde. In diesem Fall war es App-Hallo-Welt. Jetzt werde ich den ng-Aufschlag des Befehls ausführen im Terminalfenster, um die Anwendung zu erstellen. Jetzt, da die Anwendung läuft, Ich werde es in einem Browserfenster öffnen, und Sie können zu localhost:4200 gehen, um die Anwendung anzuzeigen. Und hier seht ihr die App zeigt die erstellte Komponente an. Das ist alles für diese Lektion, Einführung von Winkelkomponenten. Schauen Sie sich die nächste Lektion an wo wir den Decorator und die Metadaten behandeln.

Anfänger Anbieter : Michaela Ochnich 5 Lektionen · 25m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

In diesen Lektionen werden Angular-Komponenten vorgestellt und wie sie die Ansicht einer Angular-Anwendung steuern. Sie lernen den Komponentendekorator kennen und erfahren, wie er zur Konfiguration der Komponente verwendet wird. Sie lernen auch, wie Sie Daten in der Komponentenvorlage anzeigen können. Schließlich lernen Sie die verschiedenen Arten der Datenbindung und die Hooks im Lebenszyklus der Komponente kennen.

Was Sie lernen werden

Verstehen Sie, was eine Angular-Komponente ist und wie sie die Ansicht einer Angular-Anwendung steuert
Konfigurieren Sie Komponenten mit dem Komponenten-Decorator
Zeigen Sie Daten in der Komponentenvorlage an
Wenden Sie die verschiedenen Arten der Datenbindung an
Arbeiten Sie mit den Lifecycle-Hooks der Komponente

Wichtige Erkenntnisse

Angular-Komponenten steuern die Ansicht einer Angular-Anwendung.
Der Komponenten-Decorator wird zur Konfiguration der Komponente verwendet.
Vorlagen werden verwendet, um Daten in der Komponente anzuzeigen.
Angular unterstützt verschiedene Arten der Datenbindung.
Komponenten haben Lifecycle-Hooks, die während ihres Lebenszyklus verwendet werden können.

Häufig gestellte Fragen

Was behandelt dieser Kurs?

Er führt Angular-Komponenten ein und erklärt, wie sie die Ansicht einer Angular-Anwendung steuern, einschließlich des Komponenten-Decorators, der Anzeige von Daten in der Komponentenvorlage, der verschiedenen Arten der Datenbindung und der Lifecycle-Hooks der Komponente.

Welche Fähigkeiten werde ich aus diesem Kurs erwerben?

Sie erwerben Fähigkeiten in Angular (Web Framework), Angular Components, Angular UI, Component Libraries, HTML Components und UI Components.

Welche Themen werden in den Lektionen behandelt?

Die Lektionen behandeln was eine Komponente ist, den Komponenten-Decorator, Vorlagen, Bindung und den Lebenszyklus der Komponente.

Welche Lernziele hat dieser Kurs?

Die Ziele bestehen darin, mehr über Angular-Komponenten und ihre Funktionen zu erfahren und die verschiedenen Arten der Datenbindung zu lernen.