ANWENDUNG UND WEB ENTWICKLUNG
Angular 15-Programmierung
LÄNGE 5 Tage
VERSION 15
WARUM DIESEN KURS STUDIEREN?
Dieser intensive und umfassende Angular 15-Schulungskurs vermittelt den Teilnehmern Fähigkeiten, die sie sofort bei ihrer Arbeit anwenden können. Sie lernen die Grundlagen der Angular 15-Entwicklung kennen, z. B. Single-Page-Browseranwendungen und Responsive webStandorte und hybride mobile Anwendungen.
Dieser Kurs ist eine Kombination aus theoretischem Lernen und praktischen Übungen und umfasst eine Einführung in Angular, gefolgt von TypeScript, Komponenten, Direktiven, Diensten, HTTPClient, Tests und Debugging.
Notiz: Wir können auch Schulungen zu anderen Angular-Versionen anbieten. Bitte kontaktieren Sie uns, um eine Anfrage zu stellen oder Ihr Interesse anzumelden.
WINKEL BEI LUMIFY WORK
WAS SIE LERNEN WERDEN
Nach erfolgreichem Abschluss dieses Kurses verfügen Sie über die folgenden Kenntnisse:
- Entwickeln Sie einseitige Angular-Anwendungen mit Typescript
- Richten Sie eine vollständige Angular-Entwicklungsumgebung ein
- Erstellen Sie Komponenten, Direktiven, Dienste, Pipes, Formulare und benutzerdefinierte Validatoren
- Erledigen Sie erweiterte Netzwerkdatenabrufaufgaben mithilfe von Observables
- Daten aus REST verbrauchen web Dienste mit dem Angular HTTP Client
- Behandeln Sie Push-Datenverbindungen mit dem WebSocket-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
- Arbeiten Sie mit Angular CLI
Mein Lehrer war großartig darin, Szenarien in reale Situationen umzusetzen, die sich auf meine spezifische Situation beziehen.
Ich fühlte mich vom ersten Moment an willkommen und die Möglichkeit, als Gruppe außerhalb des Klassenzimmers zu sitzen und unsere Situationen und Ziele zu besprechen, war äußerst wertvoll.
Ich habe viel gelernt und fand es wichtig, dass meine Ziele durch die Teilnahme an diesem Kurs erreicht werden.
Großartige Arbeit, das Lumify Work-Team.
AMANDA NICOL
IT-SUPPORT-SERVICES-MANAGER – HEALTH WORLD LIMITED
KURSGEGENSTÄNDE
- Wir stellen vor: 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 Winkelanwendung
• Ausführen der Anwendung
• Erstellen und Bereitstellen der Anwendung
• Angular für native mobile Apps - 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
• Sichtbarkeitskontrolle
• Klassenkonstruktoren
• Klassenkonstruktoren – Alternative Form
• Nicht initialisierte Felder
• Schnittstellen
• Arbeiten mit ES6-Modulen
• var vs. let
• Pfeilfunktionen
• Kompakte Syntax der Pfeilfunktion
• Vorlagenzeichenfolgen
• Generika im Unterricht
• Generics in Funktion - Komponenten
• Was ist eine Komponente?
• Ein Example Komponente
• Erstellen einer Komponente mit Angular CLI
• Die Komponentenklasse
• Der @Component-Dekorator
• Registrieren einer Komponente bei ihrem Modul
• Komponentenvorlage
• Example: HelloComponent-Vorlage
• Example: Die HelloComponent-Klasse
• Verwenden einer Komponente
• Führen Sie die Anwendung aus
• Komponentenhierarchie
• Die Anwendungsstammkomponente
• Der Bootstrap File
• Komponentenlebenszyklus-Hooks
• Exampdie Lifecycle Hooks
• CSS-Stile - 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
• ngFor Lokale Variablen
• Manipulation der Sammlung
• Example – Löschen eines Elements
• Artikelverfolgung mit ngFor
• Elemente mit ngSwitch austauschen
• Elemente gruppieren
• Vorlagenreferenzvariable - 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 - Vorlagengesteuerte Formulare
• Vorlagengesteuerte Formulare
• Modul „Formulare importieren“.
• Grundlegender Ansatz
• Ein Formular einrichten
• Einholen von Benutzereingaben
• Weglassen des ngForm-Attributs
• Initialisieren Sie das Formular
• Zwei-Wege-Datenbindung
• Formularvalidierung
• Winkelvalidatoren
• Anzeigen des Validierungsstatus mithilfe von Klassen
• Zusätzliche Eingabetypen
• Kontrollkästchen
• Wählen Sie (Dropdown-)Felder
• Rendering-Optionen für „Auswählen“ (Dropdown)
• Datumsfelder
• Radio Knöpfe - Reaktive Formen
• Reaktive Formen vorbeiview
• Die Bausteine
• Reactive FormsModule importieren
• Erstellen Sie ein Formular
• Entwerfen Sie die Vorlage
• Eingabewerte abrufen
• Initialisierung der Eingabefelder
• Formularwerte festlegen
• Abonnieren von Eingabeänderungen
• Validierung
• Integrierte 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? - Dienste und Abhängigkeitsinjektion
• Was ist ein Dienst?
• Erstellen eines Basisdienstes
• Die Serviceklasse
• Was ist Abhängigkeitsinjektion?
• Injizieren einer Serviceinstanz
• Einspritzdüsen
• Injektorhierarchie
• Registrieren eines Dienstes beim Root Injector
• Registrieren eines Dienstes beim Injector einer Komponente
• Registrieren Sie einen Dienst mit einem Feature-Modul-Injektor
• Wo kann man einen Dienst registrieren?
• Abhängigkeitsinjektion in andere Artefakte
• Bereitstellung einer alternativen Implementierung
• Abhängigkeitsinjektion und @Host
• Abhängigkeitsinjektion und @Optional - HTTP-Client
• Der Angular HTTP-Client
• Verwendung des HTTP-Clients – Overview
• Importieren von HttpClientModule
• Dienst mit HttpClient
• Eine GET-Anfrage stellen
• Was macht ein beobachtbares Objekt?
• Nutzung des Dienstes in einer Komponente
• Die PeopleService-Clientkomponente
• Fehlerbehandlung
• Anpassen des Fehlerobjekts
• Eine POST-Anfrage stellen
• Eine PUT-Anfrage stellen
• Eine DELETE-Anfrage stellen - Pipes und Datenformatierung
• Was sind Rohre?
• Eingebaute Rohre
• Verwendung von Pipes in HTML-Vorlagen
• Verketten von Rohren
• Internationalisierte Rohre (i18n)
• Laden von Gebietsschemadaten
• Die Datumspipe
• Die Zahl Pipe
• Währungspfeife
• Erstellen Sie eine benutzerdefinierte Pipe
• Kundenspezifisches Rohr-Example
• Benutzerdefinierte Pipes verwenden
• Verwenden einer Pipe mit ngFor
• Ein Filterrohr
• Pfeifenkategorie: Rein und unrein
• Pure Pipe Example
• Unreines Rohr Example - Einführung in Single-Page-Anwendungen
• Was ist eine Single Page Application (SPA)?
• Traditionell Web Anwendung
• SPA-Workflow
• Einseitiger Anwendungsvorteiltages
• HTML5-Verlaufs-API
• SPA-Herausforderungen
• Implementierung von SPAs mit Angular - 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 der Routenparameter
• Asynchrones Abrufen eines Routenparameters
• Abfrageparameter
• Bereitstellung von Abfrageparametern
• Abfrageparameter asynchron abrufen
• Probleme mit dem Handbuch URL Eintrag und Lesezeichen - Erweiterter HTTP-Client
• Anfrageoptionen
• Zurückgeben eines HttpResponse-Objekts
• Festlegen von Anforderungsheadern
• Neue Observablen erstellen
• Erstellen eines einfachen Observablen
• Die Observable-Konstruktor-Methode
• Beobachtbare Operatoren
• Die Karten- und Filteroperatoren
• Der flatMap()-Operator
• Der tap()-Operator
• Der zip()-Kombinator
• HTTP-Antwort zwischenspeichern
• Sequentielle HTTP-Aufrufe durchführen
• Parallele Anrufe tätigen
• Anpassen des Fehlerobjekts mit CatchError()
• Fehler in der Pipeline
• Fehlerbehebung - Winkelmodule
• Warum Angular-Module?
• Anatomie einer Modulklasse
• @NgModule-Eigenschaften
• Funktionsmodule
• Example Modulstruktur
• Erstellen Sie ein Domänenmodul
• Erstellen Sie ein Routed/Routing-Modul-Paar
• Erstellen Sie ein Servicemodul
• Gemeinsame Module erstellen
• Verwendung eines Moduls von einem anderen - Erweitertes Routing
• Routing-fähiges Funktionsmodul
• Verwendung des Funktionsmoduls
• Lazy Loading des Feature-Moduls
• Erstellen von Links für die Funktionsmodulkomponenten
• Mehr über Lazy Loading
• Vorladen von Modulen
• routerLinkActive-Bindung
• Standardroute
• Wildcard-Routenpfad
• „redirectTo“.
• Untergeordnete Routen
• Untergeordnete Routen für untergeordnete Routen definieren
• Links für untergeordnete Routen
• Navigationswachen
• Erstellen von Guard-Implementierungen
• Verwendung von Guards in einer Route - Unit-Tests von Angular-Anwendungen
• Unit-Testing von Winkelartefakten
• Testwerkzeuge
• 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 eines Mock-HTTP-Clients
• Bereitstellung vorgefertigter Antworten
• Testen einer Komponente
• Komponententestmodul
• Erstellen einer Komponenteninstanz
• Die ComponentFixture-Klasse
• Grundlegende Komponententests
• Die DebugElement-Klasse
• Simulieren von Benutzerinteraktionen - 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 – Änderungserkennung und Ausführung
• Syntaxfehler abfangen
Für wen ist der Kurs geeignet?
Dieser Kurs richtet sich an alle, die die Grundlagen der Angular 15-Entwicklung erlernen und diese direkt beim Erstellen anwenden möchten web Anwendungen.
Wir können diesen Schulungskurs auch für größere Gruppen anbieten und anpassen – so sparen Sie Ihrer Organisation Zeit, Geld und Ressourcen. Für weitere Informationen kontaktieren Sie uns bitte per E-Mail unter ph.training@lumifywork.com
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
- Es sind keine Vorkenntnisse in Angular oder AngularJS erforderlich
Die Bereitstellung dieses Kurses durch Lumify Work unterliegt den Buchungsbedingungen.
Bitte lesen Sie die Allgemeinen Geschäftsbedingungen sorgfältig durch, bevor Sie sich für diesen Kurs anmelden, da die Anmeldung zum Kurs von der Annahme dieser Allgemeinen Geschäftsbedingungen abhängt.
https://www.lumifywork.com/en-ph/courses/angular-15-programming/
ph.training@lumifywork.com
lumifywork.com
facebook.com/LumifyWorkPh
LinkedIn.com/company/lumify-work-ph
twitter.com/LumifyWorkPH
youtube.com/@lumifywork
Dokumente / Ressourcen
 |
LUMIFY WORK Angular 15 Programmierung [pdf] Benutzerhandbuch Angular 15-Programmierung, Programmierung |
