Angular Training - eLearning

Angular – Webentwicklung – E-Learning

Dieser Angular-Zertifizierungskurs hilft Ihnen dabei, die Frontend-Webentwicklung mit Angular zu meistern. Erwerben Sie fundierte Kenntnisse über Angular-Konzepte wie die Entwicklung von einseitigen Webanwendungen, Dependency Injection, Typescript, Komponenten, Direktiven, Pipes, Formulare, Routing und Tests.

Programmmerkmale:

• Kurs und Material sind in englischer Sprache
• 1 Jahr Zugang zur E-Learning-Plattform zum Selbststudium, rund um die Uhr verfügbar
• Anfänger bis Fortgeschrittene für angehende Webentwickler
• 20 Stunden Online-Lernen zum Selbststudium
• 50 Stunden Lernzeit empfohlen
• 2 Projekte am Kursende
• Keine Prüfung am Kursende, aber die Teilnehmer erhalten ein Zertifikat über den Abschluss der Schulung

Voraussetzungen:

Für die Teilnahme an diesem Angular-Zertifizierungskurs sind keine Vorkenntnisse erforderlich.

Zielgruppe

Ein Angular-Zertifizierungskurs ist ideal für Personen, die ihre Kenntnisse in Angular, einem beliebten JavaScript-Framework für die Erstellung dynamischer Webanwendungen, aufbauen oder vertiefen möchten. Hier sind die Personen, die am meisten davon profitieren können:

• UI-Entwickler
• Technische Projektmanager
• Full-Stack-Webentwickler
• Qualitätssicherungsspezialisten
• Studierende, die Frontend-UI-Entwicklung lernen möchten

Wichtigste Lernergebnisse

Am Ende dieses Online-Angular-Schulungskurses werden Sie in der Lage sein

• das Design von Single-Page-Anwendungen und die Vorteile von Angular für deren Entwicklung zu verstehen
• die Modell-, View- und Controller-Ebenen Ihrer Anwendung zu trennen und mit Angular zu implementieren
• Angular-Ausdrücke, -Filter und -Bereiche zu beherrschen
• Angular-Formulare zu erstellen
• Angular-Direktiven zu schreiben
• Ihre Angular-Anwendungen Unit-Tests und End-to-End-Tests zu unterziehen
• interaktive und dynamische Benutzeroberflächen mit Bootstrap zu entwickeln.

Kursinhalt

Selbstbestimmter Lehrplan

Lektion 01 – Single-Page-Anwendungen

• Kursübersicht
• Einführung in Single-Page-Anwendungen (SPA)
• Wofür brauchen wir Angular?
• Einrichten der Entwicklungsumgebung
• Angular-Anwendungsarchitektur
• Erste Angular-App

Lektion 02 – TypeScript und ESNext

• Modul Einführung und Einführung in TypeScript
• Einrichten der Umgebung zum Schreiben von TypeScript
• Variablendeklarationen (var, let und const)
• Typen – Primitive
• Typen – Referenz- und Spezialtypen
• Operatoren – Spread und Backticks
• Operatoren – Destrukturierung und Rest
• Klassen
• Schnittstellen
• Pfeilfunktionen
• Module
• Fetch
• Async oder await

Lektion 03 – Dekoratoren

• Einführung in das Modul und Überblick über Angular-Module
• Was sind Dekoratoren?
• Angular-Module und der Dekorator @NgModule
• Deklarationen
• Importe und Exporte

• Provider, Bootstrap und Einstiegskomponenten
• Angular-Anwendungs-Bootstrap-Mechanismus

Lektion 04 – Komponentendekorator

• Modul Einführung
• Angular-Komponenten und der @Component-Dekorator
• Erstellen einer Angular-Komponente mit der Angular-CLI und auf StackBlitz
• Metadaten des Komponentendekorators
• Ansichtskapselung – Emuliert, ShadowDom, Keine
• Datenbindung – String-Interpolation
• Eigenschaftsbindung
• Ereignisbindung
• @Input- und @Output-Eigenschaftsdekoratoren
• Zweiwege-Datenbindung
• Attributbindung
• Klassenbindung
• Klassenbindung
• Einführung in Lebenszyklus-Hooks in Angular
• Verwendung von Lebenszyklus-Hooks in Angular
• Ansichtsabfragen – Ansicht „Child“, Ansicht „Children“, Inhalt ‚Child‘, Inhalt „Children“
• Ändern des Erkennungsmechanismus in Angular. ZoneJS, NgZones

Lektion 05 – Angular-Routing

• Einführung in das Routing
• Implementieren von Routing in einer Angular-App
• Erstellen einer Benutzerliste. Vorbereiten von Child Routing
• Abstrahieren des Benutzerlinks in eine separate Komponente
• Implementieren von Child Routes
• Pfadabgleich und Routentypen
• Einführung in Route Guards in Angular
• CanActivate- und CanActivateChild-Guards in Angular
• CanDeactivate-Guard in Angular
• Vorabrufen von Daten für eine Komponente mit Resolve

Lektion 06 – Dependency Injection

• Einführung in den Abschnitt
• DI als Muster, DI als Framework und Arten von Providern
• Hierarchische Dependency Injection
• Einführung in Services in Angular
• Daten aus einer Rest-API mit HttpClient abrufen
• CRUD-Operationen mit HttpClient, HttpParams und HttpHeaders
• Observables und Operatoren in Observables – Map, Retry, Catch
• Behavior Subject und Datenfreigabe mit Behavior Subjects

Lektion 07 – Direktiven im Detail

• Einführung in den Abschnitt
• Einführung in Direktiven
• Integrierte Strukturdirektiven
• Integrierte Attributdirektiven
• Erstellen benutzerdefinierter Attributdirektiven
• Erstellen benutzerdefinierter Strukturdirektiven
• Einführung in Pipes in Angular
• Verwenden integrierter Pipes
• Erstellen benutzerdefinierter Pipes in Angular
• Reine und unreine Pipes in Angular
• Dekoratoren erneut betrachtet
• Erstellen benutzerdefinierter Dekoratoren in Angular
• Erstellen einer benutzerdefinierten Lifecycle-Hook-Klasse Logger-Dekorator
• Erstellen eines benutzerdefinierten Eigenschaftsdekorators in Angular

Lektion 08 – Formulare in Angular

• Einführung in den Abschnitt
• Arten von Formularerstellungsstrategien in Angular
• Schnelles Erstellen langer Bootstrap-Formulare mit VS Code und Emmet
• Hinzufügen von FormControl(s) zu einem vorlagengesteuerten Formular mit der ngModel-Direktive
• Abrufen der JavaScript-Objektdarstellung eines Formulars mit der ngForm-Direktive
• Deaktivieren der Schaltfläche „Senden“ in einem Formular mit dem Flag $invalid des Formulars
• Abrufen der JavaScript-Objektdarstellung eines Formulars in der TypeScript-Klasse
• Hinzufügen von Kontrollkästchen, Optionsfeldern und Auswahllisten zu Ihrem vorlagengesteuerten Formular
• Erstellen von Unterabschnitten im Formular mit der NgModelGroup-Direktive
• Schritte zum Implementieren eines reaktiven Formulars in Angular
• Schnelles Erstellen eines Bootstrap-Formulars für unser reaktives Formular mit Emmet
• Erstellen eines reaktiven Formulars in der TypeScript-Klasse und Verbinden mit der Vorlage
• Hinzufügen von Formularvalidierungen zu einem reaktiven Formular
• Dynamisches Hinzufügen oder Entfernen von FormControl(s) oder FormGroup(s) mit FormArray(s)
• Hinzufügen synchroner benutzerdefinierter Validierungen zu Ihrem reaktiven Formular
• Hinzufügen asynchroner benutzerdefinierter Validierungen zu Ihrem reaktiven Formular
• Zurücksetzen des Werts eines Formulars

Lektion 09 – Verwenden von Bibliotheken von Drittanbietern

• Einführung in den Abschnitt
• Erstellen eines Angular-CLI-Projekts mit SCSS als Basisstil
• Einführen von Material Design Bootstrap in Ihr Angular-CLI-Projekt
• Hinzufügen einer Navigationsleiste in Ihrer Kopfzeile
• Hinzufügen von Material Design-Schaltflächen
• Hinzufügen von Karten
• Verwenden von Material Design-Dropdown-Menüs und Formulareingaben
• Einführung von Angular Material in Ihr Angular CLI-Projekt oben in MDB
• Hinzufügen von Optionsfeldern, Schiebereglern, Fortschrittsbalken und Drehreglern Einführung in Firebase
• Erstellen einer App mit der Firebase-Konsole
• Einrichten Ihres Angular CLI-Projekts für die Unterstützung von Firebase
• Interaktion mit der Firebase-Echtzeitdatenbank mithilfe von Methoden in AngularFireList
• Hinzufügen und Lesen von Daten aus der Echtzeitdatenbank in Firebase
• Aktualisieren und Löschen von Daten aus der Echtzeitdatenbank in Firebase