Angular (2+) verstehen und anwenden

Lernt Angular 2+ von A - Z. Nutzt das Angular CLI, TypeScript and erstellt damit großartige Web Apps!

4.57 (1809 reviews)
Udemy
platform
Deutsch
language
Web Development
category
8,494
students
13 hours
content
Feb 2021
last update
$44.99
regular price

What you will 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

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!




Content

Der Schnelleinstieg in Angular 2

Ein paar Worte zum Kurs und zu mir
Dieser Kurs und Angular 4+
Was ist Angular 2?
WICHTIG: Angular CLI - Die Neueste Version
Los geht's: Die Erstellung eines Angular 2 Projekts
Troubleshooting: Angular CLI / Angular 2 Setup
Anpassen der ersten Angular 2 App
.angular-cli.json vs angular.json
Die Projektstruktur verstehen
Was ist TypeScript?
Wo gibt's den Quellcode?

"Components" und "Databinding"

"Components" verstehen
Wie startet eine Angular 2 App eigentlich?
Component Templates und Styles
Das Erstellen einer neuen "Component"
AppModule verstehen
Mit mehreren "Components" arbeiten
Wie Styles in "Components" funktionieren
Inhalte mittels <ng-content> zwischen "Components" verteilen
Mit Daten arbeiten: "Components" und "Databinding"
Text mittels "String Interpolation" ausgeben
Daten übergeben und Ereignisse behandeln - mit Property und Event Binding
"Property Binding" anwenden
Eigene Felder (Properties) mittels "Property Binding" setzen
"Event Binding" anwenden
Eigene Ereignisse (Events) mittels "Event Binding" verarbeiten
Weitere Infos zu "Property" und "Event Binding"
Datenfluss in beide Richtungen mittels "Two-Way-Binding"
HTML Elemente aus dem Template nutzen
Der Lebenszyklus einer "Component"
Der Lebenszyklus in Aktion
Beispiele zum "Component" Lebenszyklus

Kursprojekt: "Components" und "Databinding" nutzen

Bootstrap 3 vs 4
Moduleinleitung
Die ersten "Components" erstellen
Eine bessere Projektstruktur mittels Aufteilung erreichen
Ein Datenmodell für das Rezept
"Property Binding" für Datenübertragung nutzen
Eine "Component" für die Detailansicht erstellen und anbinden
Eine Kette aus "Event" und "Property Bindings" bauen
Die Einkaufsliste "Component"

"Directives" verstehen

Was sind "Directives"?
"Attribute Directives" verstehen und nutzen
Wie man eigene "Attribute Directives" erstellt
Eine eigene "Attribute Directive" - Basis
"Directives" und "AppModule"
DOM Zugriff mit dem Angular 2 "Renderer"
Angular 4 und der "Renderer"
DOM Zugriff mit "HostBinding"
Auf Ereignisse mittels "HostListener" reagieren
Eigene "Directives" und "Property Binding"
"Structural Directives": Die DOM Struktur mit *ngIf kontrollieren
Listen mit *ngFor ausgeben
Eine Alternative zu *ngIf: ngSwitch
Wofür der "*" gut ist
Eine eigene "Structural Directive"

Kursprojekt: "Directives" nutzen

Eine Liste von Rezepten mit *ngFor ausgeben
Eine Liste von Zutaten ausgeben
Eine eigene Dropdown Directive erstellen

"Services" zur Kommunikation und Zentralisierung nutzen

Was sind "Services"?
Ein einfacher "Service": LogService
Wie man einen "Service" mittels "Dependency Injection" bereitstellt
Den LogService mittels "Dependency Injection" bereitstellen
Einen DataService zur Datenzentralisierung erstellen
Eine vs Mehrere Instanzen eines "Services"
"Services" in "Services" bereit stellen (injecten)
Angular 6 und RxJS 6
Kommunikation zwischen "Components" mit "Services" steuern

Kursprojekt: "Services" nutzen

Rezepte in einem RecipeService verwalten
Daten zwischen Components mittels "Services" austauschen
Die Einkaufsliste mit einem "Service" verwalten

"Routing": Seitenwechsel mit dem Angular 2 "Router"

Moduleinleitung
"Routes" aufsetzen, konfigurieren und aufrufen
Navigation mittels Links ermöglichen
Programmatisch navigieren
Routingparameter übergeben
Routingparameter richtig extrahieren
Optionale Parameter (Query Parameter) nutzen
Links und Query Parameter
Mehr zu Observables & Angular 2 Routing
Ein "Hash Fragment" (#) übergeben
Verschachtelte "Routes" anlegen: "Child Routes"
Zu verschachtelten "Routes" navigieren
Umleitungen/ Weiterleitungen einrichten
Wildcards nutzen
Aktive Links stylen
"Routes" beschützen - Vor dem Zugriff
"Routes" beschützen - Vor dem Verlassen
Routingstrategien und notwendige Servereinstellungen

Kursprojekt: "Routing" nutzen

Einleitung & Zielsetzung
"Routes" aufsetzen und konfigurieren
Links und Navigationsmöglichkeiten ergänzen
Verschachtelte "Routes" im Rezeptbuch
Rezepte-IDs mittels Routing übergeben
Programmatisch navigieren
Den aktuellen Aufenthaltsort mittels aktiver Links mitteilen
Routingparameterwechsel korrekt verarbeiten & Bugfixes

Formulare nutzen und Nutzereingaben verarbeiten

Moduleinleitung
Ansatz 1 - Der "Template-Driven Approach"
Eingabeelemente (Controls) erfassen - Template-Driven
Das Formular übermitteln - Template-Driven
Felder des Angular 2 "Form" Objekts
Formularvalidierung mit Angular 2 - Template-Driven
Den Status ("State") des Formulars nutzen - Template-Driven
Standardwerte bereitstellen - Template-Driven
Two-Way-Binding und Formulare - Template-Driven
Gruppieren von Eingabeelementen - Template-Driven
Radio Buttons nutzen - Template-Driven
Eine Zusammenfassung des "Template-Driven Approach"
Ansatz 2 - Der "Reactive" oder auch "Data-Driven Approach"
Programmatisch erstelltes Form-Objekt und HTML Formular synchronisieren
Formulare übermitteln - Reactive Approach
Formularvalidierung im "Reactive Approach"
Den Status ("State") des Formulars nutzen - Reactive Approach
Gruppieren von Eingabeelementen - Reactive Approach
Radio Buttons im Reactive Approach
Arrays von Eingabeelementen - Reactive Approach
Alternativer Weg der Formularerstellung: Der "Formbuilder" - Reactive Approach
Eigene Validierungsregeln erstellen - Reactive Approach
Asynchrone Validierungsregeln nutzen
Auf Status- und Wertveränderungen reagieren
Formulare zurücksetzen

Kursprojekt: Formulare nutzen

Ein Formular für die Einkaufsliste - Template-Driven
Zutaten zur Liste hinzufügen - Template-Driven
Das Zurücksetzen des Formulars ermöglichen
Zutaten bearbeiten und deren Status verwalten
Zutaten löschen
Rezepte erstellen - Reactive
TypeScript Formular und Template HTML synchronisieren
Ein neues Rezept übermitteln
Zutaten zu Rezept hinzufügen
Den Status des Rezeptformulars nutzen
Zum Formular navigieren
Ein Rezept zur Bearbeitung laden
Das Formular für die Bearbeitung anpassen
Die Formulare fertigstellen

"Pipes" zur Transformierung von Daten nutzen

Was sind Pipes?
Pipes verwenden
Argumente an Pipes übergeben
Mehrere Pipes kombiniert verwenden
Mehr über verfügbare Pipes erfahren
Eine eigene Pipe erstellen
Beispiel: Eine Filter-Pipe
Beschränkungen von Pipes - "Pure" und "impure" Pipes
Die "async" Pipe
Zusammenfassung

Http-Zugriff aus einer Angular 2 App

Einleitung und Erklärung von "Observables"
Ein Beispielprojekt aufsetzen
Angular Http Client Installieren
Daten via POST-Request übermitteln und "Observables" nutzen
Daten via GET-Request empfangen
Observables zur Datentransformierung nutzen
Fehlerbehandlung bei Http Requests
Http und die "async" Pipe
Mehr zu Observables

Kursprojekt: Http nutzen

Setup des Backends (Servers)
Daten mittels PUT Request übermittlen
Die Datenübermittlung ermöglichen
Daten mittels GET Request abrufen
Die App bei neuen Daten aktualisieren
Warum eigentlich PUT statt POST?

Angular 2 Module nutzen und die App optimieren

Moduleinleitung
Verschiedene Module für verschiedene Features der App nutzen
Die Appstruktur überprüfen
Feature Module: Ein eigenes Modul für die Einkaufsliste
Feature Module: Ein eigenes Modul für das Rezeptbuch (inkl. Routing)
Routes nur bei Bedarf laden - Lazy Loading verstehen
Lazy Loading vorbereiten
Lazy Loading für das Rezeptbuch nutzen
Optional: Lazy Loading für die Einkaufsliste
Shared Modules: Wiederkehrende Inhalte teilen
Core Module: Kernfunktionalitäten outsourcen
Zusammenfassung zu Modulen und Lazy Loading
Mehr zu Angular 2 Modulen
Weitere Optimierung: Die Templates bereits VOR dem Start im Server kompilieren

Eine Angular 2 App hosten (Deployment)

Moduleinleitung
Vorbereitung der App
Beispiel: Hosting auf AWS S3
Wichtige Hinweise & Troubleshooting

Authentifizierung und Angular 2

Moduleinleitung und Überblick über Authentifizierung in einer Angular 2 App
Ein Beispielprojekt aufsetzen
Routing hinzufügen
Das Erstellen von Nutzern ermöglichen
Das Anmelden (Authentifizieren) von Nutzern ermöglichen
Eine erste kurze Zusammenfassung
Das Ausloggen ermöglichen (wenn angemeldet)
Den Authentifizierungsstatus überprüfen
Routes nur für angemeldete Nutzer zugänglich machen

Angular 2 Animationen nutzen

Animationen und Angular 4
Moduleinleitung
Animationen aufsetzen und verschiedene Status nutzen
Übergänge zwischen Status ergänzen
Mit vielen Status und "Wildcards" arbeiten
Übergänge in Phasen aufteilen
Das Erscheinen und Verschwinden von Elementen animieren (*ngIf)
Listen animieren - Vorbereitung
Listen animieren
Jedes Detail einer Animation mit "Keyframes" kontrollieren
Mehrere Animationen gruppieren und gleichzeitig abspielen
Animationsereignisse nutzen

Angular 2 CLI und eigenes Angular 2 Setup (mit Webpack)

Mehr über das CLI lernen
Eigenes Angular 2 Setup: Einleitung
Das Grundgerüst aufsetzen
Notwendige Pakete (bspw. Angular 2) installieren
Eine Beispiel-App erstellen
Die index.html Datei anpassen
Für den Workflow benötigte Pakete installieren
Webpack Konfigurationen aufsetzen
Den Workflow für den Entwicklungsmodus fertigstellen
Lazy Loading ermöglichen
Offline Compilation (AoT) ermöglichen
Den Produktivworkflow aufsetzen
Fertigstellung des Produktivworkflows & Bugfixing

Das Ende

Zusammenfassung & Nächste Schritte
Slides Download

Screenshots

Angular (2+) verstehen und anwenden - Screenshot_01Angular (2+) verstehen und anwenden - Screenshot_02Angular (2+) verstehen und anwenden - Screenshot_03Angular (2+) verstehen und anwenden - Screenshot_04

Reviews

Jörn
July 24, 2023
Eine Aktualisierung auf die neueste Angular Version wäre hilfreich siehe; import { HttpClientModule } from '@angular/common/http'; statt import { HttpClientModule } from '@angular/http';
Eduard
January 23, 2023
Unfortunately not the most actual version of Angular, current is now 14, missing the use of clean typescript (property types).
Alen
January 19, 2023
Enttäuschender Kurz! Einfach gar nichts funktioniert so wie hier beschrieben. Vor allem wurde auch nicht die Mutter-Kind Componenten Beziehung erklärt. Hauptsache es gibt eine Komponente die sich "recipe-list" und eine "recipe-item" nennt. Die Namensgebungen sind so verwirrend das man da den Überblick verliert
Simone
January 10, 2023
Leider wieder mal ein veralteter Udemy Kurs und damit verbundene Fehlermeldungen. Funktioniert leider bei nicht. Schade
Ronald
December 29, 2022
Sehr gut, hat für mich vie gebracht, bzw. verstehe viel besser wie Angualr arbeitet und wie die Dynamik in Webseiten reinbringt. Absolut gut erklärt, kann sehr gut folgen und auch selber im Code nachvollziehen.
Daniel
October 28, 2022
Der Kurs bietet einen sehr umfassenden Einblick in Angular und hat mir sehr geholfen, mit dem Framework zurechtzukommen. Ansonsten kann ich nur die Kritik aus anderen Bewertungen wiedergeben: Viele Details haben sich in Angular, TypeScript, RxJS, und anderen verwendeten Bibliotheken stark verändert. Häufig findet man in den Fragen und Antworten des Kurses Hilfe, aber das HTTP-Kapitel und das Eigene-Setup-Kapitel sind hoffnungslos veraltet und sorgen daher für Frust. Gewünscht hätte ich mir noch ein Kapitel zum Testen von Apps, denn ohne Tests ist ein Produktivgang kaum möglich.
Christian
September 26, 2022
Kurs ist nicht mehr auf dem letzten Stand. Einige wichtige Schritte stimmen nicht mit dem aktuellen Angular überein.
Monika
September 1, 2022
Um einen "kurzen" Überblick über Angular zu erhalten, ist der Kurs wirklich super geeignet. Er führt einen in die Grundprinzipien der Sprache ein und es wird einem schnell klar, wo eventuell noch Übungsbedarf besteht. Es wird aber auch schnell klar, wie komplex Angular ist und wie fehleranfällig, da viele Sprachfeatures einfach nur "Strings" sind. Spannend war auch das letzte Kapitel, wo man grundsätzlich etwas über das komplette App-Setup erfahren hat. Das ist in meiner Umgebung in der Form zwar nicht relevant, aber insgesamt sehr hilfreich, um die ganzen Config-Dateien besser zu verstehen. Es wird einem allerdings auch schnell klar, dass Angular ein Riesenframework ist und viele Details einfach auf der Strecke bleiben. So wurden z.B. Testklassen einfach immer gelöscht oder gar nicht erzeugt, obwohl Testing sicherlich ein wesentlicher Teil der Entwicklung sein sollte. Hier wären vielleicht ein paar feinfühligere Worte angebracht gewesen, z.B. dass das Thema in diesem Kurs einfach gar nicht behandelt wird. (Dafür aber in Kurs x oder so...(?). Leider habe ich für den Kurs bestimmt doppelt so viel Zeit verwendet, da Max superschnell schreibt, und es mit den neuen Angular immer wieder kleine Abweichungen gab (kann man aber meist mit den Fragen zur Lektion beantworten). Hervorzuheben ist noch der Support. Meine Fragen wurde immer superschnell und zufriedenstellend beantwortet! Vielen Dank dafür an das ganze Team! Echt großartig! Fazit: Der Kurs ist super zum Einsteigen in Angular2 geeignet und hat Spaß gemacht. Allerdings ist jetzt ganz viel üben angesagt. Weiterhin hilft es sehr, wenn man sich schon mit Typescript auskennt, sonst wird es wirklich anstrengend. ;-)
Maximilian
May 16, 2022
Sehr gute Erklärungen und gute Code Struktur. Der Kurs müsste allerdings mal mit weiteren Notizen vor den Kapiteln versehen werden, da sich ein paar Dinge geändert haben. Würde mich freuen, wenn neue Videos dazu kommen würden.
Dr.
May 11, 2022
Ja gut. Ich bin Schritt für Schritt der Anleitung zur ersten Angular App gefolgt, bei mir sehen aber die generierten Files anders aus.
Wolfgang
January 5, 2022
Leider etwas sehr veraltet. Sollte stark überarbeitet oder offline genommen werden, was ich schade fände, da gute Tutorials auf Deutsch Mangelware sind. Entwicklungssprache ist zwar durchweg Englisch und stellt für viele kein Problem dar, wenn man aber im Eisntieg mit so vielen Hürden kämpfen muss, schreckt das ab.
Maik
January 3, 2022
zu viel Führung, kein selbstständiges anwenden. Zu schnelles hin und her springen zwischen Files... Aber gute Beispiele und gut Erklärt!
Yukino
August 23, 2021
Feedback: -An manchen Stellen ist er leider veraltet und man muss selber viel Googlen, aber ansonsten erklärt der Kurs Angular gut. -Der Maximilian überfliegt Dinge manchmal sehr schnell, daher musste ich sehr oft das Video pausieren. Der Kurs ist alles in allem jedoch sehr gut.
Boris
August 11, 2021
Vor Allem sind die eingefügten Kommentare für die nachträglichen Änderungen, die Angular nach der Erstellung des Tutorials erfahren hat, sehr hilfreich.
David
March 16, 2021
Guter Kurs, teils leider nicht mehr ganz aktuell. Manche Klassen sind mittlerweile ersetzt - nicht überall helfen die Q&A. Aber kurzes googlen hilft immer. Großteils aber noch passend.

Charts

Price

Angular (2+) verstehen und anwenden - Price chart

Rating

Angular (2+) verstehen und anwenden - Ratings chart

Enrollment distribution

Angular (2+) verstehen und anwenden - Distribution chart

Related Topics

1009096
udemy ID
11/11/2016
course created date
11/1/2019
course indexed date
Bot
course submited by