Angular (2+) verstehen und anwenden

Zeit in dieses Module zu starten und zu verstehen um was es hier eigentlich geht.

Wir haben im ersten Kursmodul ja bereits eine Angular 2 App erstellt und auch gestartet, aber was passiert hier eigentlich im Hintergrund? In dieser Lektion findet ihr es heraus!

Am Ende des Tages nutzen wir Components um etwas zu sehen, um eine Website zu bauen. Dafür brauchen wir zwei wichtige Konstrukte: Templates und Styles. Diese Lektion ermittelt um was es sich dabei eigentlich handelt.

Wir wissen generell was die Idee hinter Components ist, jetzt ist es an der Zeit eine neue Component hinzuzufügen.

Wir haben zwei Components, das ist klasse. Zeit sich näher mit diesem "AppModule" zu befassen. Wofür ist das da? Diese Lektion bringt Licht ins Dunkel.

Jetzt wo die Grundlagen geschaffen sind, ist es Zeit tiefer einzutauchen und die App um eine weitere Component zu ergänzen.

Wir können Styles zu unseren Components hinzufügen, so viel ist bekannt. Noch unbekannt ist, wie Angular 2 diese Styles dann in der laufenden App verwendet. Zeit mehr darüber herauszufinden!

Manchmal möchten wir eine Component als Hülle für diverse Inhalte verwenden. Wie sich zeigt, ist das relativ einfach in Angular 2!

Bisher waren alle Components eher statisch. Zeit daran etwas zu ändern und mittels "Databinding" mehr Dynamik reinzubringen. Doch was ist "Databinding"? Diese Lektion klärt auf!

Beginnen wir mit der einfachsten Form des "Databindings": String Interpolation. Diese Lektion erklärt worum es sich dabei handelt und wie wir es nutzen können.

String Interpolation ist nicht die einzige Form des Databinding, an vielen Stellen kommen wir nur mit Property Binding weiter. Und wenn wir Ereignisse behandeln wollen hilft uns sowieso nur Event Binding. Doch was ist das? Diese Lektion beantwortet die Frage.

Zeit tiefer einzusteigen, verwenden wir doch mal dieses "Property Binding".

Das tolle an Property Binding ist, dass wir nicht auf bereits existierende HTML Elemente/ Properties beschränkt sind. Wir können unsere eigenen Felder (=Properties) unserer eigenen Components binden. Wie? Diese Video zeigt's!

Daten ausgeben können wir jetzt ganz gut, wie sieht's eigentlich mit der Verarbeitung von Ereignissen aus? Diese Lektion steigt da mal tiefer ein.

Wie schon beim Property Binding sind wir nicht auf Standardereignisse beschränkt, vielmehr können wir auch eigene Ereignisse erstellen, ausgeben und verarbeiten!

Wir haben jede Menge zu diesen zwei Formen des Databindings gelernt, ein paar Zusatzinfos gibt's aber noch!

Bisher haben wir entweder Daten ausgegeben oder auf Ereignisse reagiert, tatsächlich geht aber auch beides gleichzeitig. Diese Lektion zeigt wie.

Mit Daten können wir jetzt gut arbeiten, aber was ist eigentlich wenn wir mal direkten Zugriff auf eines unserer HTML Elemente benötigen? Diese Lektion zeigt ein paar hilfreiche Werkzeuge.

Eine Component folgt in Angular 2 einem bestimmten Lebenszyklus, den wir auch nutzen können. Diese Lektion erklärt wie genau dieser Zyklus aussieht.

Die Theorie zum Lebenszyklus ist nett, noch schöner ist es aber, sich das Ganze direkt in der laufenden App anzusehen.

Steigen wir doch noch etwas tiefer ein und schauen wir uns die Verhaltensweise und Nutzung des Lebenszykluses anhand kleiner Beispiele an.

Lasst mich kurz die Idee des Modules und Projekts darlegen.

Für das Projekt brauchen wir Components. Viele Components. Fangen wir damit an und erstellen wir die ersten - in dieser Lektion.

Die ersten Components zu haben ist gut, aber ein Projekt kann damit auch schnell unübersichtlich werden. Diese Lektion zeigt wie wir unser Projekt anders strukturieren können.

Die App ist ein Rezeptbuch. Als solches hat es vermutlich Rezepte - wäre vermutlich eine gute Idee, die Struktur eines solchen Rezeptes in einem eigenen Modell festzuhalten. Machen wir das doch.

Die Basis steht, Zeit die verschiedenen Teile zu verknüpfen und mittels Property Binding Daten zu übertragen.

Weiter geht's, Zeit die App etwas zu erweitern und dem Nutzer zu erlauben sich einzelne Rezepte im Detail anzusehen.

Wenn Daten von A nach C müssen, liegt B dazwischen. So auch in Angular 2 Apps, manchmal benötigt es Ketten von Property und Event Bindings um die Daten korrekt zu übermitteln. So wie in dieser Lektion.

Fast ist der erste Teil des Projekts fertig, Zeit noch eine "Component" für die Einkaufsliste zu ergänzen!

Was sind Directives eigentlich genau? Dieses Video liefert Aufklärung!

Fangen wir mit der ersten Form von Directives an: Attribute Directives. Es gibt einige bereits in Angular 2 eingebaute, dieses Video liefert einen Überblick über die Funktionsweise und Idee dahinter.

Der Titel verrät es bereits, diese Lektion erläutert wie eigene Attribute Directives erstellt und genutzt werden können.

Starten wir mit der eigenen "Attribute Directive" und erstellen wir eine erste Basisversion.

Wichtig: Wie schon Components, müssen auch Directives deklariert werden. Dieses Video steigt tiefer ein und zeigt den Zusammenhang.

Bauen wir unsere eigene Directive doch noch etwas aus und verbessern wir die Art und Weise, wie auf das DOM/ HTML Element zugegriffen wird.

Erfahrt, was es neues zum Renderer gibt (in Angular 4).

Die Directive funktioniert gut, aber wir können sie noch etwas mehr verbessern - mit einem HostBinding. Was das ist? Diese Lektion liefert Antworten.

Wir können das HTML Element, auf welchem die Directive sitzt, verändern, jetzt wäre es aber auch noch schön, wenn wir auch auf Ereignisse reagieren könnten. Können wir! Mit HostListener!

Wie schon bei Components, können wir auch bei Directives mit Property Binding arbeiten um Daten zu übergeben.

Bisher haben wir mittels Attribute Directives einzelne Element verändert, jetzt geht's um die generelle DOM Struktur. Structural Directives erlauben uns hier einzugreifen, eine bereits eingebaute, sehr wichtige, Directive ist *ngIf. Sehen wir uns diese mal näher an.

Mit *ngIf kontrollieren wir OB wir etwas sehen, genauso wichtig ist aber *ngFor, welches uns das dynamische Ausgeben von Listen ermöglicht.

Manchmal wären sehr komplexe if-statements notwendig um das gewünschte Ergebnis zu erzielen, Gottseidank gibt's aber auch noch ngSwitch!

Warum haben Structural Directives eigentlich diesen merkwürdigen "*" (Stern)? Dieses Video liefert Aufklärung.

Viel haben wir über Structural Directives gelernt, erstellen wir jetzt doch mal eine eigene.

Wir haben ja mehr als ein Rezept und würden diese Liste gerne dynamisch ausgeben - toller weise können wir das: Mit *ngFor!

Wie schon für die Rezepte, wollen wir nun auch für die Zutaten eine Möglichkeit der dynamischen Ausgabe implementieren.

In unserer Navigation wollen wir ja ein Dropdown zur Datenverwaltung integrieren. Machen wir das doch - mit einer eigenen Directive.

Starten wir mit der wichtigsten Frage: Was sind Services eigentlich und was ist deren Nutzen?

Erstellen wir doch mal einen einfachen, ersten Service => Zum "loggen" von Texteingaben (in der JS Console).

Wir haben einen Service, das ist super. Jetzt muss er aber noch bereitgestellt werden - das geht mittels Dependency Injection. Dieses Video erklärt die Details.

Schauen wir uns die Idee hinter Dependency Injection doch mal an und stellen wir unseren LogService in der App bereit.

Ein Service welcher bestimmte Aufgaben zentralisiert ist ein typischer Anwendungsfall, ein weiterer ist das zentraler Speichern und Bereitstellen von Daten. Diese Lektion nimmt sich eines solchen Services an.

Bei der Bereitstellung eines Services haben wir die Wahl: Soll jede empfangende Komponente unserer App eine eigene Instanz erhalten oder wollen wir für mehrere (potentiell alle) Komponenten die gleiche verwenden? Sehen wir uns das Ganze doch mal im Detail an.

Wir können Services auch in anderen Services nutzen! Dabei gilt es jedoch eine Besonderheit zu beachten - diese Lektion zeigt welche.

Mit Angular 6 ist die Installation einer weiteren Library notwendig um alles am Laufen zu halten.

Ein typisches Problem ist, dass mehrere Components, die nicht unbedingt in einer Parent->Child Beziehung stehen, miteinander kommunizieren sollen. Services können uns hier auch helfen wie diese Lektion zeigt.

Bisher werden die (Dummy)Rezepte direkt in den Components verwaltet. Das ist nicht optimal, ein Service könnte das besser!

Auch bei der Kommunikation zwischen Components können wir noch Verbesserungen vornehmen - schauen wir uns das doch auch mal genauer an.

Last but not least, bietet sich auch bei der Einkaufsliste noch die Nutzung eines Services an. Mehr dazu in dieser Lektion.

Lasst mich euch kurz die Ziele und Ideen dieses Kursmoduls näher bringen.

Starten wir direkt: Setzen wir die ersten Routes mittels des Angular 2 Routers auf und versuchen wir dann, diese auch gleich aufzurufen.

Routes über die URL aufrufen zu können ist nett, es geht aber besser. Sehen wir uns mal an wie wir Links einbauen und nutzen können.

Nicht immer soll eine Navigation durch das Klicken eines Links erfolgen, manchmal wollen wir nach Abschluss einer Operation eine neue Navigation starten. Kein Problem in Angular 2!

Oftmals sollen auch Daten in der URL übergeben werden (bspw. Nutzer-ID). Diese Lektion erklärt, wie das mit dem Angular 2 Router funktioniert.

Parameter übergeben zu können ist nett, aber extrahieren sollte man sie auch können. Diese Lektion zeigt wie man das (richtig) macht.

Nicht alle Parameter sind direkt Teil der URL, manche sollen auch nur manchmal, optional, übergeben werden. Diese Lektion schaut mal näher hin.

Wie können wir Query Parameter mit unseren existierenden Links nutzen, wie übergeben wir dort die Daten korrekt? Dieses Video liefert Antworten.

Neben Parametern und Query Parametern, können auch Hash Fragmente (der Teil hinter dem # in der URL) übergeben werden. Dieses Video zeigt wie das funktioniert.

Typischerweise gibt es auch Routes, die nicht zur obersten Ebene des Routers gehören, sondern in anderen Routes verschachtelt sind (bspw. /user/details). Diese Lektion zeigt, wie solche Routes angelegt werden können.

Selbstverständlich, sollen diese Child Routes auch mittels Links etc. ansprechbar sein. Diese Video zeigt, wie das funktioniert.

Manchmal soll der Nutzer einfach nur zu einer anderen Route umgeleitet werden. Angular 2 macht das sehr einfach, wie dieses Video zeigt.

Was wenn alle Requests, die keine bestehende Route ansprechen, weitergeleitet werden sollen (Catch-All)? Kein Problem mit Wildcards.

Typischerweise soll der Nutzer ja grafisch erfahren, welche Route (welcher Link) gerade aktiv ist. Auch das geht ohne Probleme, wie diese Lektion zeigt.

Manchmal soll der Zugriff auf eine bestimmte Route kontrolliert werden - Route Guards helfen hier. Dieses Video erklärt, wie der Zugriff auf eine Route kontrolliert werden kann.

Manchmal soll der Zugriff auf eine bestimmte Route kontrolliert werden - Route Guards helfen hier. Dieses Video erklärt, wie das Verlassen einer Route kontrolliert werden kann.

Angular 2 bietet 2 verschiedene Routing-Modi, einer davon benötigt spezielle Servereinstellungen. Dieser Artikel liefert mehr Details.

Los geht's, was ist das Ziel dieses Moduls?

Wir haben es bereits gelernt, jetzt ist es Zeit auch in einer "echten" App Routes aufzusetzen und zu nutzen.

Routes alleine sind noch nicht super hilfreich, Nutzer sollen auch die Möglichkeit erhalten auf Links klicken zu können um sich durch die App zu bewegen.

Unserer App ist glücklicherweise komplex genug, verschachtelte Routes zu nutzen - dann setzen wir diese nun doch mal auf.

Auch das Übergeben von Parametern will geübt sein - in unserer App gilt es zum Beispiel die IDs ausgewählter Rezepte zu übermitteln. Sehen wir uns das doch mal genauer an.

Bei bestimmten Aktionen wollen wir den Nutzer "wegnavigieren". Diese Lektion zeigt wie das in der App funktioniert.

Lassen wir den Nutzer doch auch mal wissen, wo er sich gerade in der App befindet - mittels aktiver Links!

Ein paar kleinere Fehler haben sich doch noch eingeschlichen, Zeit diese zu beheben!

Worum geht's in diesem Module eigentlich, warum ist es wichtig? Diese Lektion liefert antworten.

Wir haben zwei verschiedene Ansätze, wie Formulare verarbeitet werden können. Diese Lektion startet den detaillierteren Blick auf den ersten Ansatz: Den Template-Driven Approach.

Angular 2 muss natürlich wissen, welche Eingabeelemente (bspw. <input>) unser Formular so hat und nutzen soll. Diese Lektion zeigt, wie wir diese Informationen mit Angular 2 teilen.

Eingabeelemente sind registriert, die Daten sind erfasst - Zeit das Formular nun auch noch zu übermitteln. Angular 2 hilft dabei - wie, das zeigt diese Lektion.

Was speichert Angular 2 eigentlich alles zu einem Formular - schauen wir uns das JavaScript Object doch mal näher an.

Nutzereingaben können häufig Fehler beinhalten, daher ist eine Validierung selbiger absolut notwendig. Wie das in Angular 2 funktioniert, zeigt diese Lektion.

Angular 2 speichert den Status ("State") des Formulars, wir können diesen dann wiederum nutzen. Wie, zeigt diese Lektion.

Wir können die Eingabeelemente des Formulars auch mit Standardwerten befüllen, diese Video beleuchtet diese Möglichkeit näher.

Abseits der Bereistellung von Standardwerten, können wir auch Two-Way-Binding zur Interaktion mit Eingabeelementen nutzen.

Einige Eingabeelemte formen logische Gruppen. Angular 2 erlaubt es uns diese Elemente zusammen zu "Überelementen" zu gruppieren, diese Video steigt tiefer ein.

Abseits der Standard-Eingabeelemente, gibt es auch noch andere interessante Elemente. Radio Buttons gehören dazu, deren Nutzung erklärt dieses Video.

Zeit den Template-Driven Approach nochmal zusammenzufassen.

Alternativ zum Template-Driven Approach, können wir auch den Reactive oder auch Data-Driven genannten Ansatz (Approach) wählen. Dieses Video erklärt den Grundgedanken und zeigt wie ein Formular damit erstellt wird.

Das Form-Objekt wurde in JavaScript/ TypeScript erstellt, nun muss noch irgendwie die Verbindung zum HTML Code hergestellt werden. Diese Video zeigt wie das funktioniert.

Wie übermittelt man nun so ein Formular, welches mittels des Reactive Approach erstellt und synchronisiert wurde?

Auch bei diesem Ansatz wollen wir natürlich die Nutzereingaben validieren - Zeit für eine nähere Betrachtung.

Wie schon im ersten Ansatz, können wir den von Angular 2 verwalteten Formularstatus nutzen, dieses Video zeigt, wie das im Reactive Approach funktioniert.

Natürlich ist auch das Gruppieren von Eingabeelementen im Reactive Approach möglich, dieses Video steigt diesbezüglich mal tiefer ein.

Und auch die Radio Buttons wollen natürlich nicht vergessen werden, sehen wir sie uns doch mal näher an.

Im "Reactive Approach" ist es besonders einfach auch Arrays von Eingabeelementen zu verwalten und zu nutzen. Diese Video zeigt, wie das funktioniert.

Zur Erstellung eines Form-Objekts, bietet uns Angular 2 noch einen alternativen Weg an - den Formbuilder.

Manchmal decken die bereits existierenden Regeln nicht alles ab, was uns interessiert. Deshalb macht Angular 2 das Erstellen und Verwenden von eigenen Regeln extra einfach wie diese Lektion zeigt.

Neben den "normalen", synchronen Validierungsregeln, können wir auch asynchrone Regeln aufsetzen und nutzen. Lernt mehr darüber in diesem Video.

Angular 2 gibt uns die Möglichkeit auf jede Veränderung des Formularstatus oder -werts zu reagieren, diese Video zeigt, wie's funktioniert.

Last but not least, ist natürlich auch von Interesse, wie Formulare eigentlich zurückgesetzt werden können. Diese Lektion liefert die Antwort.