Angular 2 verstehen und anwenden
4.6 (596 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,061 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 verstehen und anwenden to your Wishlist.

Add to Wishlist

Angular 2 verstehen und anwenden

Lernt Angular 2 von A - Z. Nutzt das Angular CLI, TypeScript and erstellt damit großartige Web Apps!
4.6 (596 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
3,061 students enrolled
Last updated 3/2017
German
Curiosity Sale
Current price: $10 Original price: $150 Discount: 93% off
30-Day Money-Back Guarantee
Includes:
  • 13 hours on-demand video
  • 13 Articles
  • 113 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Am Ende des Kurses werden Teilnehmer in der Lage sein die vielen Features von Angular 2 zu verstehen und in eigenen Webapps anzuwenden
  • Der sichere Umgang mit Angular 2 sowie die Möglichkeit zum tieferen Eintauchen in fortgeschrittenere Angular 2 Themen sind am Ende des Kurses sicher
View Curriculum
Requirements
  • JavaScript, HTML und CSS Kenntnisse sollten vorhanden sein, da diese über den gesamten Kurs hinweg vorausgesetzt werden
  • TypeScript Kenntnisse oder ein begleitender Kurs dazu sind empfehlenswert
  • ES6 Kenntnisse sind ein Plus, aber nicht zwingend notwendig
Description

Angular 2 ist der von Google entwickelte Nachfolger eines der beliebtesten Frontend JavaScript Frameworks der Welt: Angular 1. Und es ist einfach großartig!

Übrigens, eines gleich zu Beginn: Es sind keinerlei Angular 1 Kenntnisse erforderlich um mit Angular 2 zu starten. Tatsächlich weicht Angular 2 so stark von Angular 1 ab, dass die Verwandtschaft kaum zu sehen wäre!

Warum Angular 2?

Angular 2 ermöglicht das Erstellen von extrem vielseitigen, schnellen, mächtigen und funktionsreichen Webapplikationen. Diese Applikationen laufen im Browser und bringen damit das sehr reaktive und dadurch großartige Nutzungserlebnis von mobilen Apps auf den Desktop bzw. Browser.

Web Applikationen, die diese Nutzererfahrung erlauben, sind beliebt und nachgefragt wie zu keinem Zeitpunkt zuvor! Kein Wunder, dass Frontend Entwickler, darunter gerade auch Angular Entwickler, in höchstem Maße gefragt und sehr gut bezahlt sind.

Was bietet der Kurs?

Dieser Kurs startet bei den Grundlagen, wie ein Angular 2 Projekt erstellt wird, was Angular 2 im Detail ist, wie es funktioniert und was die Grundphilosophie dahinter ist. Und sobald diese Basiskenntnisse festgezurrt sind, geht es mit großen Schritten durch die Angular 2 WeltRouting, Formulare, Directives und Animationen sind nur ein paar der vielen Themen, die in diesem Kurs detailliert vorgestellt werden!

All die gelernten Dinge werden dann im Rahmen eines kursübergreifenden Projektes sofort in der Praxis umgesetzt.

Die Inhalte im Kurzüberblick:

  • Was ist Angular 2? Welcher Philosophie folgt es? 
  • Wie wird eine Angular 2 App gestartet?
  • Components - die Bausteine einer jeden Angular 2 App
  • Directives - Angular 2 Befehle geben!
  • Services - Daten verwalten, App-Bestandteile verbinden und viel mehr!
  • Routing - Wie man in einer Angular 2 App die Seiten wechselt
  • Formulare - Nutzerdaten einlesen und richtig verwenden
  • Pipes - Output transformieren
  • Http / Webzugriff - Wie die Frontend App (Angular 2) mit einem Backend kommunizieren kann
  • Authentifizierung - Wie eine Angular 2 App gesichert wird
  • Animationen - Es soll ja auch schön aussehen!
  • Optimierungen und Angular Module - Wie die App besser strukturiert und optimiert wird
  • Und noch mehr!

Für wen ist der Kurs gedacht?

Finden wir heraus ob dieser Kurs für dich geeignet ist! Kannst du mindestens eine der folgenden Fragen mit "Ja" beantworten? Dann nichts wie los!

  • JavaScript Grundkenntnisse und der Wille zur Einarbeitung in eine darauf aufbauende Sprache (TypeScript) sind vorhanden? 
  • Das Ziel ist es, tolle Web Applikationen (egal ob klein, mittel oder groß) welche direkt im Browser laufen, zu erschaffen? 
  • Du möchtest eines der modernsten Frontend Frameworks lernen?

Ich freue mich darauf, dich in diesem Kurs begrüßen zu dürfen!




Who is the target audience?
  • Dieser Kurs richtet sich an Frontend Entwickler (oder solche die es werden wollen), die Lust haben eines der besten Frontend Frameworks der Welt zu lernen
  • Dieser Kurs richtet sich an Einsteiger und erfahrene JavaScript Entwickler, die auf Ihren Kenntnissen aufbauen und großartige Frontend Applikationen erstellen wollen
Students Who Viewed This Course Also Viewed
Curriculum For This Course
210 Lectures
12:58:19
+
Der Schnelleinstieg in Angular 2
9 Lectures 25:05

Los geht's, zumindest fast. Ich möchte die Gelegenheit nutzen und mich und den Kurs kurz vorstellen.

Preview 01:42

Angular 4 wurde veröffentlicht - was bedeutet das für diesen Kurs?

Preview 01:04

Was ist dieses Angular 2 eigentlich, wie funktioniert es und warum würden wir es überhaupt nutzen wollen? Dieses Video liefert Aufklärung.

Preview 04:19

Zeit die Folien zu verlassen und mit der Erstellung unseres ersten Projekts zu beginnen. Wir werden in diesem Kurs das Angular CLI nutzen, dieses Video zeigt die notwendige Installation und wie wir es nutzen um ein neues Angular 2 Projekt zu erstellen.

Preview 03:38

Probleme bei der CLI-Installation oder dem Erstellen eines neuen Angular 2 Projekts? Diese Lektion kann dabei helfen.

Troubleshooting: Angular CLI / Angular 2 Setup
00:35

Wir haben eine erste App, das ist klasse! Aber die App hat jetzt noch keinen besonderen, eigenen Touch. Zeit das in dieser Lektion zu ändern!

Preview 04:21

Das CLI hat gefühlt 100 Dateien und Ordner erstellt. Wofür? Diese Lektion steigt tiefer ein und erklärt die Ordnerstruktur und wie wir sie nutzen.

Preview 05:38

Was ist eigentlich dieses TypeScript, welches Angular 2 nutzt? Naja, es ist eine schöne Erweiterung zu JavaScript - schauen wir es uns mal näher an.

Preview 03:36

Wo gibt's den Quellcode?
00:11
+
"Components" und "Databinding"
21 Lectures 01:34:31

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

"Components" verstehen
01:31

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!

Wie startet eine Angular 2 App eigentlich?
08:20

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.

Component Templates und Styles
02:25

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

Das Erstellen einer neuen "Component"
05:48

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.

AppModule verstehen
03:01

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

Mit mehreren "Components" arbeiten
03:10

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!

Wie Styles in "Components" funktionieren
04:15

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

Inhalte mittels <ng-content> zwischen "Components" verteilen
04:15

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!

Mit Daten arbeiten: "Components" und "Databinding"
04:08

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.

Text mittels "String Interpolation" ausgeben
05:35

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.

Daten übergeben und Ereignisse behandeln - mit Property und Event Binding
02:09

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

"Property Binding" anwenden
07:05

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!

Eigene Felder (Properties) mittels "Property Binding" setzen
05:01

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.

"Event Binding" anwenden
03:46

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

Eigene Ereignisse (Events) mittels "Event Binding" verarbeiten
05:09

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

Weitere Infos zu "Property" und "Event Binding"
03:13

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

Datenfluss in beide Richtungen mittels "Two-Way-Binding"
03:44

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.

HTML Elemente aus dem Template nutzen
08:37

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

Der Lebenszyklus einer "Component"
02:14

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

Der Lebenszyklus in Aktion
04:30

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

Beispiele zum "Component" Lebenszyklus
06:35
+
Kursprojekt: "Components" und "Databinding" nutzen
8 Lectures 37:05

Lasst mich kurz die Idee des Modules und Projekts darlegen.

Moduleinleitung
04:03

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

Die ersten "Components" erstellen
04:36

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.

Eine bessere Projektstruktur mittels Aufteilung erreichen
07:11

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.

Ein Datenmodell für das Rezept
03:32

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

"Property Binding" für Datenübertragung nutzen
01:48

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

Eine "Component" für die Detailansicht erstellen und anbinden
04:30

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.

Eine Kette aus "Event" und "Property Bindings" bauen
05:24

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

Die Einkaufsliste "Component"
06:01
+
"Directives" verstehen
15 Lectures 52:49

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

Was sind "Directives"?
03:40

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.

"Attribute Directives" verstehen und nutzen
03:56

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

Wie man eigene "Attribute Directives" erstellt
04:00

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

Eine eigene "Attribute Directive" - Basis
04:10

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

"Directives" und "AppModule"
00:41

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

DOM Zugriff mit dem Angular 2 "Renderer"
03:29

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

Angular 4 und der "Renderer"
00:19

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

DOM Zugriff mit "HostBinding"
03:21

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!

Auf Ereignisse mittels "HostListener" reagieren
03:10

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

Eigene "Directives" und "Property Binding"
04:49

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.

"Structural Directives": Die DOM Struktur mit *ngIf kontrollieren
03:04

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

Listen mit *ngFor ausgeben
02:52

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

Eine Alternative zu *ngIf: ngSwitch
02:21

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

Wofür der "*" gut ist
04:29

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

Eine eigene "Structural Directive"
08:28
+
Kursprojekt: "Directives" nutzen
3 Lectures 14:42

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

Eine Liste von Rezepten mit *ngFor ausgeben
03:53

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

Eine Liste von Zutaten ausgeben
05:36

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

Eine eigene Dropdown Directive erstellen
05:13
+
"Services" zur Kommunikation und Zentralisierung nutzen
8 Lectures 24:28

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

Was sind "Services"?
02:14

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

Ein einfacher "Service": LogService
02:38

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.

Wie man einen "Service" mittels "Dependency Injection" bereitstellt
01:42

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

Den LogService mittels "Dependency Injection" bereitstellen
02:14

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.

Einen DataService zur Datenzentralisierung erstellen
03:46

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.

Eine vs Mehrere Instanzen eines "Services"
02:58

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

"Services" in "Services" bereit stellen (injecten)
04:22

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.

Kommunikation zwischen "Components" mit "Services" steuern
04:34
+
Kursprojekt: "Services" nutzen
3 Lectures 14:28

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

Rezepte in einem RecipeService verwalten
04:15

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

Daten zwischen Components mittels "Services" austauschen
04:57

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

Die Einkaufsliste mit einem "Service" verwalten
05:16
+
"Routing": Seitenwechsel mit dem Angular 2 "Router"
18 Lectures 01:08:48

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

Moduleinleitung
01:54

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

"Routes" aufsetzen, konfigurieren und aufrufen
07:45

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.

Navigation mittels Links ermöglichen
05:11

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!

Programmatisch navigieren
02:17

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

Routingparameter übergeben
04:12

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

Routingparameter richtig extrahieren
07:49

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

Optionale Parameter (Query Parameter) nutzen
05:56

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

Links und Query Parameter
01:52

Mehr zu Observables & Angular 2 Routing
01:05

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.

Ein "Hash Fragment" (#) übergeben
03:16

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.

Verschachtelte "Routes" anlegen: "Child Routes"
04:01

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

Zu verschachtelten "Routes" navigieren
01:34

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

Umleitungen/ Weiterleitungen einrichten
02:11

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

Wildcards nutzen
01:48

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

Aktive Links stylen
04:26

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.

"Routes" beschützen - Vor dem Zugriff
05:29

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.

"Routes" beschützen - Vor dem Verlassen
07:11

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

Routingstrategien und notwendige Servereinstellungen
00:50
+
Kursprojekt: "Routing" nutzen
8 Lectures 27:34

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

Einleitung & Zielsetzung
00:45

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

"Routes" aufsetzen und konfigurieren
04:44

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.

Links und Navigationsmöglichkeiten ergänzen
02:06

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

Verschachtelte "Routes" im Rezeptbuch
05:38

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.

Rezepte-IDs mittels Routing übergeben
05:55

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

Programmatisch navigieren
04:12

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

Den aktuellen Aufenthaltsort mittels aktiver Links mitteilen
02:50

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

Routingparameterwechsel korrekt verarbeiten & Bugfixes
01:24
+
Formulare nutzen und Nutzereingaben verarbeiten
25 Lectures 01:39:21

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

Moduleinleitung
04:00

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.

Ansatz 1 - Der "Template-Driven Approach"
02:58

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 (Controls) erfassen - Template-Driven
04:17

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

Das Formular übermitteln - Template-Driven
06:24

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

Felder des Angular 2 "Form" Objekts
03:18

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

Formularvalidierung mit Angular 2 - Template-Driven
04:48

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

Den Status ("State") des Formulars nutzen - Template-Driven
05:14

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

Standardwerte bereitstellen - Template-Driven
02:46

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

Two-Way-Binding und Formulare - Template-Driven
01:47

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

Gruppieren von Eingabeelementen - Template-Driven
02:13

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

Radio Buttons nutzen - Template-Driven
05:03

Zeit den Template-Driven Approach nochmal zusammenzufassen.

Eine Zusammenfassung des "Template-Driven Approach"
01:15

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.

Ansatz 2 - Der "Reactive" oder auch "Data-Driven Approach"
05:02

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.

Programmatisch erstelltes Form-Objekt und HTML Formular synchronisieren
03:16

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

Formulare übermitteln - Reactive Approach
01:51

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

Formularvalidierung im "Reactive Approach"
03:54

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

Den Status ("State") des Formulars nutzen - Reactive Approach
02:17

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

Gruppieren von Eingabeelementen - Reactive Approach
04:19

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

Radio Buttons im Reactive Approach
03:08

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

Arrays von Eingabeelementen - Reactive Approach
09:07

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

Alternativer Weg der Formularerstellung: Der "Formbuilder" - Reactive Approach
04:13

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.

Eigene Validierungsregeln erstellen - Reactive Approach
05:18

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

Asynchrone Validierungsregeln nutzen
06:52

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

Auf Status- und Wertveränderungen reagieren
03:03

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

Formulare zurücksetzen
02:58
10 More Sections
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
43,034 Reviews
132,374 Students
15 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.