Angular Architektur Grundlagen
Lernkartei zur Vorbereitung für die IPA.
Lernkartei zur Vorbereitung für die IPA.
Kartei Details
| Karten | 45 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Berufslehre |
| Erstellt / Aktualisiert | 21.07.2019 / 24.02.2024 |
| Weblink |
https://card2brain.ch/box/20190721_angular_architektur_grundlagen
|
| Einbinden |
<iframe src="https://card2brain.ch/box/20190721_angular_architektur_grundlagen/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Was sind strukturelle Direktiven? Kannst du einige nennen und erklären?
Strukturelle Direktiven sind verantwortlich für das HTML Layout. Sie verändern die DOM Struktur, indem sie typischerweise etwas hinzufügen, entfernen oder verändern.
- *ngIf -> wenn zutreffend, wird das DOM ergänzt, ansonsten wird es gelöscht / nicht angezeigt
- *ngFor -> typsicherweise für die Darstellung von Listen. Iteriert durch die Objekte
- [ngSwitch] -> mehrfach Bedingungen. Jedes zutreffende wird dem DOM hinzugefügt
Was sind die Unterschied einer Angular Component zum klassischen MVC Pattern?
- Komponente kontrollieren nur ihre eigene View und Daten
- Komponente haben eine öffentliche Schnittstelle -> @Input und @Output
- Komponente haben einen definierten lebenszyklus (lifecycle hooks sind eine Abfolge dessen)
- Eine Angular Applikation besteht aus einem Baum von Komponenten -> sie können voneinander abhängen
Welche Arten von Forms kennst du?
Erkläre kurz den Unterschied.
Template driven Forms
- Angular erstellt ein Form Model aufgrund des templates (html)
- Angular stellt diese Möglichkeit über das FormsModule bereit
- Das FormsModule stellt über Direktiven diverse Möglichkeiten bereit (ngModel, ngModelGroup, ngForm, ngSubmit...)
- Am häufigsten wird wohl [(ngModel)] für ein einfaches twoWay Binding verwendet
Reactive Forms
- Das Formular wird explizit im Code modeliert und das UI bindet dieses Model
- Angular stellt diese Möglichkeit über das ReactiveFormsModule bereit
- über Direktiven können form-elemente auf ein form-model gebunden werden (formControl, formGroup)
Was ist der Hauptzweck des async-pipes? Was ist der Hauptvorteil?
Damit kann ein Observable direkt im HTML abonniert werden. Ist gerade beim Beziehen von Daten ab einem Service eine sehr einfache Methode.
Der Hauptvorteil liegt darin, dass das Abo automatisch und korrekt beendet wird, wenn die Komponente beendet wird.
Was sind Attibut Direktive. Wie benutzt du sie später im Template-Code?
Attribut Direktiven verändern optische Elemente, lassen das DOM aber wie es ist. Daher das HTML wird nicht in der Stuktur verändert.
Du benutzt sie, indem du sie einfach dem entsprechenden HTML-Element ergänzt. Beispielsweise
<p meineDirektive>
Werden zusätzlich Daten an die Direktive übergeben, schreibst du nebst der Direktive noch den Namen des @Input-Properties mit dem zu übergebenden Wert.
<p meineDirektive [farbe]=" 'orange' ">
