LUMIFY WORK Angular 12 Programmierung

WARUM DIESEN KURS STUDIEREN?

Dieser umfassende Angular 12-Programmierkurs ist eine Kombination aus theoretischem Lernen und praktischen Übungen. Er umfasst eine Einführung in Angular, gefolgt von TypeScript, Komponenten, Anweisungen, Diensten, HTTP-Client, Tests und Debugging.
Der Kurs ist vollgepackt mit nützlichen und umsetzbaren Informationen, die Sie sofort auf Ihre Arbeit anwenden können. Lernen Sie die Grundlagen der grundlegenden Angular 12-Entwicklung kennen, z. B. Single-Page-Browser-Anwendungen und Responsive webWebsites und hybride mobile Anwendungen.
Notiz: Wir können auch Schulungen zu anderen Versionen von Angular anbieten. Bitte kontaktieren Sie uns, um eine Anfrage zu stellen oder Ihr Interesse anzumelden.

WAS SIE LERNEN WERDEN
Nach erfolgreichem Abschluss dieses Kurses können Sie:

• Entwickeln Sie einseitige Angular-Anwendungen mit Typescript
• Richten Sie eine vollständige Angular-Entwicklungsumgebung ein
• Erstellen Sie Komponenten, Anweisungen, Dienste, Pipes, Formulare und benutzerdefinierte Validatoren
• Erledigen Sie erweiterte Aufgaben zum Abrufen von Netzwerkdaten mithilfe von Observables. Nutzen Sie Daten aus REST web Dienste, die den Angular HT TP Client verwenden. Behandeln Sie Push-Datenverbindungen mithilfe des WebSockets-Protokoll
• Arbeiten Sie mit Angular Pipes, um Daten zu formatieren
• Nutzen Sie erweiterte Angular Component Router-Funktionen
• Testen und debuggen Sie Angular-Anwendungen mit integrierten Tools.

KURSGEGENSTÄNDE

Kapitel 1. Einführung in Angular

• Was ist Angular?
• Zentrale Features des Angular Frameworks Passende Anwendungsfälle
• Bausteine ​​einer Angular-Anwendung. Grundlegende Architektur einer Angular-Anwendung. Installieren und Verwenden von Angular
• Anatomie einer Angular-Anwendung, die die Anwendung ausführt
• Erstellen und Bereitstellen der Anwendung Angular für native mobile Apps
• Zusammenfassung

Kapitel 2. Einführung in TypeScript

• Programmiersprachen zur Verwendung mit Angular TypeScript-Syntax
• Programmiereditoren
• Das Typsystem – Variablen definieren
• Das Typsystem – Arrays definieren
• Grundlegende primitive Typen
• Geben Sie Funktionen ein
• Typinferenz
• Klassen definieren
• Klassenmethoden
• Sichtkontrolle
• Klassenkonstruktoren
• Klassenkonstruktoren – Nicht initialisierte Felder in alternativer Form
• Schnittstellen
• Arbeiten mit ES6-Modulen
• var vs. let
• Pfeilfunktionen
• Pfeilfunktion Kompakte Syntax-Vorlagenzeichenfolgen
• Generika im Unterricht
• Generika in Funktion
• Zusammenfassung

Kapitel 3. Komponenten

• Was ist eine Komponente?
• Ein Example Komponente
• Erstellen einer Komponente mit Angular CLI
• Die Komponentenklasse
• Der @Component-Dekorator
• Registrieren einer Komponente in ihrer Modulkomponentenvorlage
• Example: HelloComponent-Vorlage
• Example: Die HelloComponent-Klasse, die eine Komponente verwendet
• Führen Sie die Anwendung aus
• Komponentenhierarchie
• Die Anwendungsstammkomponente
• Der Bootstrap File
• Komponentenlebenszyklus-Hooks Bspampdie Lifecycle Hooks
• CSS-Stile
• Zusammenfassung

Kapitel 4. Komponentenvorlagen

• Vorlagen
• Speicherort der Vorlage
• Die Moustache {{ }}-Syntax
• Festlegen von DOM-Elementeigenschaften
• Festlegen des Elementtexts
• Ereignisbindung
• Ausdrucksereignishandler
• Verhindern Sie die Standardbehandlung
• Attributanweisungen
• Wenden Sie Stile an, indem Sie CSS-Klassen ändern
• Example: ngClass
• Stile direkt anwenden
• Strukturrichtlinien
• Vorlage bedingt ausführen
• Example: ngIf
• Schleifen mit ngFor
• ngFür lokale Variablen
• Manipulieren der Sammlung Bspample – Löschen eines Elements
• Artikelverfolgung mit ngFor-Austauschelementen mit ngSwitch-Gruppierungselementen
• Zusammenfassung der Vorlagenreferenzvariablen

Kapitel 5. Kommunikation zwischen Komponenten

• Kommunikationsgrundlagen
• Die Datenflussarchitektur
• Vorbereiten des Kindes auf den Datenempfang
• Daten vom übergeordneten Element senden
• Weitere Informationen zum Festlegen von Eigenschaften
• Auslösendes Ereignis von einer Komponente
• @Output() Bspample – Untergeordnete Komponente @Output() Bspample – Übergeordnete Komponente
• Vollständige Zwei-Wege-Bindung
• Einrichten der bidirektionalen Datenbindung in Parent
• Zusammenfassung

Kapitel 6. Vorlagengesteuerte Formulare

• Vorlagengesteuerte Formulare
• Modul „Formulare importieren“.
• Grundlegende Vorgehensweise
• Ein Formular einrichten
• Benutzereingaben erhalten
• Weglassen des ngForm-Attributs
• Initialisieren Sie das Formular
• Zweiwege-Datenbindung
• Formularvalidierung
• Winkelvalidatoren
• Anzeigen des Validierungsstatus mithilfe von Klassen zusätzlicher Eingabetypen
• Kontrollkästchen
• Wählen Sie (Dropdown-)Felder aus
• Rendering-Optionen für ausgewählte (Dropdown-)Datumsfelder
• Optionsfelder
• Zusammenfassung

Kapitel 7. Reaktive Formen

• Reaktive Formen vorbeiview
• Die Bausteine
• ReactiveFormsModule importieren
• Erstellen Sie ein Formular
• Entwerfen Sie die Vorlage
• Eingabewerte abrufen
• Initialisierung der Eingabefelder
• Formularwerte festlegen
• Abonnieren von Eingabeänderungen
• Validierung
• Eingebaute Validatoren
• Validierungsfehler wird angezeigt
• Benutzerdefinierter Validator
• Verwendung eines benutzerdefinierten Validators
• Bereitstellung der Konfiguration für den benutzerdefinierten Validator
• FormArray – Eingaben dynamisch hinzufügen
• FormArray – Die Komponentenklasse
• FormArray – Die Vorlage
• FormArray – Werte
• Sub FormGroups – Komponentenklasse
• Sub FormGroups – HTML-Vorlage
• Warum Sub FormGroups verwenden?
• Zusammenfassung

Kapitel 8. Dienste und Abhängigkeitsinjektion

• Was ist ein Dienst?
• Erstellen eines Basisdienstes
• Die Serviceklasse
• Was ist Dependency Injection?
• Injizieren einer Serviceinstanz
• Injektoren
• Injektorhierarchie
• Registrieren eines Dienstes beim Root Injector
• Registrieren eines Dienstes beim Injektor einer Komponente
• Registrieren Sie einen Dienst mit einem Feature-Modul-Injektor
• Wo kann man einen Dienst registrieren?
• Abhängigkeitsinjektion in anderen Artefakten, die eine alternative Implementierung bieten, Abhängigkeitsinjektion und @Host
• Abhängigkeitsinjektion und @Optional
• Zusammenfassung

Kapitel 9. HTTP-Client

• Der Angular HT TP-Client
• Verwendung des HTTP-Clients – Endeview
• HttpClientModule wird importiert
• Dienst mit HttpClient
• Eine GET-Anfrage stellen
• Was macht ein beobachtbares Objekt?
• Verwenden des Dienstes in einer Komponente
• Die Fehlerbehandlung der PeopleService-Clientkomponente
• Anpassen des Fehlerobjekts
• Erstellen einer POST-Anfrage
• Eine PUT-Anfrage stellen
• Eine DELETE-Anfrage stellen

Kapitel 10. Pipes und Datenformatierung

• Was sind Rohre?
• Eingebaute Rohre
• Verwendung von Pipes in HTML-Vorlagen zur Verkettung von Pipes
• Internationalisierte Pipes (i18n) Laden von Gebietsschemadaten
• Die Datumspfeife
• Die Zahl Pipe
• Währungspfeife
• Erstellen Sie ein benutzerdefiniertes Rohr
• Kundenspezifisches Rohr-Example
• Verwenden benutzerdefinierter Pipes
• Verwenden einer Pipe mit ngFor
• Ein Filterrohr
• Pfeifenkategorie: Rein und unrein
• Zusammenfassung
• Pure Pipe Example
• Unreines Rohr Example
• Zusammenfassung

Kapitel 11. Einführung in Einzelseitenanwendungen

• Was ist eine traditionelle Single Page Application (SPA)? Web Anwendung
• SPA-Workflow
• Einseitige Anwendungserweiterungtages HTML5-Verlaufs-API
• SPA-Herausforderungen
• Implementieren von SPAs mithilfe von Angular Summary

Kapitel 12. Der Angular Component Router

• Der Komponenten-Router
• View Navigation
• Die Angular Router-API
• Erstellen einer Router-fähigen Anwendung
• Hosten der gerouteten Komponenten
• Navigation über Links und Schaltflächen
• Programmatische Navigation
• Übergabe von Routenparametern
• Navigieren mit Routenparametern
• Abrufen der Routenparameterwerte
• Synchrones Abrufen des Routenparameters
• Asynchrones Abrufen eines Routenparameters
• Abfrageparameter
• Bereitstellung von Abfrageparametern
• Abfrageparameter asynchron abrufen
• Probleme mit dem Handbuch URL Eintrag und Lesezeichen
• Zusammenfassung

Kapitel 13. Erweiterter HTTP-Client

• Anfrageoptionen
• Zurückgeben eines HttpResponse-Objekts
• Anforderungsheader festlegen
• Neue Observablen erstellen
• Erstellen eines einfachen Observablen
• Die Observable-Konstruktor-Methode Observable-Operatoren
• Die Karten- und Filteroperatoren
• Der flatMap()-Operator
• Der tap()-Operator
• Der zip()-Kombinator
• Zwischenspeichern der HT-TP-Antwort
• Sequentielle HT-TP-Anrufe tätigen
• Parallelanrufe tätigen
• Anpassen des Fehlerobjekts mit CatchError()
• Fehler in der Pipeline
• Fehlerbehebung
• Zusammenfassung

Kapitel 14. Winkelmodule

• Warum Winkelmodule?
• Anatomie einer Modulklasse
• @NgModule-Eigenschaften
• Funktionsmodule
• Example Modulstruktur
• Erstellen Sie ein Domänenmodul
• Erstellen Sie ein Routed/Routing-Modulpaar
• Erstellen Sie ein Servicemodul
• Gemeinsame Module erstellen

Kapitel 15. Erweitertes Routing

• Routing-fähiges Funktionsmodul
• Verwendung des Feature-Moduls
• Lazy Loading des Feature-Moduls
• Erstellen von Links für die Funktionsmodulkomponenten
• Mehr über Lazy Loading
• Vorladen von Modulen
• Standardroute
• Wildcard-Routenpfad
• Weiterleiten an
• Untergeordnete Routen
• Untergeordnete Routen definieren
• für untergeordnete Routen
• Links für untergeordnete Routen
• Navigationswachen
• Erstellen von Guard-Implementierungen
• Verwendung von Guards in einer Route
• Zusammenfassung

Kapitel 16. Unit-Tests von Angular-Anwendungen

• Unit-Testing von Winkelartefakten
• Testtools
• Typische Testschritte
• Testergebnisse
• Jasmine Testsuiten
• Jasmine-Spezifikationen (Unit-Tests)
• Erwartungen (Behauptungen)
• Matcher
• Examples zur Verwendung von Matchern
• Verwendung der not-Eigenschaft
• Auf- und Abbau in Unit-Test-Suites
• ExampDatei der beforeEach- und afterEach-Funktionen
• Winkeltestmodul
• Exampdas Winkeltestmodul
• Testen eines Dienstes
• Injizieren einer Serviceinstanz
• Testen Sie eine synchrone Methode
• Testen Sie eine asynchrone Methode
• Verwendung von Mock HT TP Client
• Bereitstellung vorgefertigter Antworten
• Testen einer Komponente
• Komponententestmodul
• Erstellen einer Komponenteninstanz
• Die ComponentFixture-Klasse
• Grundlegende Komponententests
• Die DebugElement-Klasse
• Simulation der Benutzerinteraktion
• Zusammenfassung

Kapitel 17. Debuggen

• Überview des Angular-Debugging
• ViewTypeScript-Code im Debugger verwenden
• Verwenden des Debugger-Schlüsselworts
• Debug Protokollierung
• Was sind Angular DevTools?
• Verwendung von Angular DevTools
• Angular DevTools – Komponentenstruktur
• Angular DevTools – Ausführung der Änderungserkennung
• Syntaxfehler abfangen
• Zusammenfassung

Laborübungen

• Labor 1. Einführung in Angular
• Labor 2. Einführung in TypeScript
• Labor 3. Einführung in Komponenten
• Labor 4. Komponentenvorlage
• Übung 5. Erstellen Sie eine Fotogalerie-Komponente
• Labor 6. Vorlagengesteuertes Formular
• Übung 7. Erstellen Sie ein Bearbeitungsformular
• Labor 8. Reaktive Form
• Labor 9. Entwickeln Sie einen Dienst
• Übung 10. Entwickeln Sie einen HT TP-Client
• Übung 11. Verwenden Sie Rohre
• Übung 12. Grundlegende Single-Page-Anwendung mit Router Übung 13. Erstellen einer Single-Page-Anwendung (SPA)
• Übung 14. Erweiterter HT-TP-Client
• Übung 15. Angular Bootstrap verwenden
• Übung 16. Verzögertes Laden von Modulen
• Übung 17. Erweitertes Routing
• Labor 18. Unit-Tests
• Labor 19. Debuggen von Angular-Anwendungen

Für wen ist der Kurs geeignet?
Dieser Kurs richtet sich an alle, die die Grundlagen der Angular 12-Entwicklung erlernen und beim Erstellen anwenden möchten web Bewerbungen sofort. Wir können diesen Schulungskurs auch für größere Gruppen anbieten und anpassen – so sparen Sie Ihrer Organisation Zeit, Geld und Ressourcen.

VORAUSSETZUNGEN
Web Entwicklungserfahrung mit HTML, CSS und JavaScript ist erforderlich, um diesen Angular-Kurs optimal nutzen zu können. Kenntnisse über das Browser-DOM sind ebenfalls hilfreich. Vorkenntnisse in Angular, mit AngularJS oder einer anderen Angular-Version, sind nicht erforderlich.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Dokumente / Ressourcen

LUMIFY WORK Angular 12 Programmierung [pdf] Benutzerhandbuch Angular 12-Programmierung, Angular, 12-Programmierung, Programmierung

Verweise

• Bedienungsanleitung