IPS IT Schulung & Consulting

Angular – Power Workshop: Der komplette Einstieg

Professioneller Einstieg in das Angular Framework

Mit dem "Angular – Power Workshop" gelingt Ihnen der perfekte Einstieg in das Angular-Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer Angular-Anwendung und bekommen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.

Beschreibung

Von der Einrichtung bis zur Bereitstellung deckt dieser Angular-Kurs alles ab! Sie erfahren alles über Komponenten, Direktiven,Services, Formulare, Http-Zugriff, Authentifizierung, Optimierung einer Angular-App mit Modulen und vieles mehr. Aber das ist noch nicht alles: Im "Angular – Power Workshop" entwickeln Sie unter professioneller Anleitung eigenständige Angular-Projekte, so dass Sie das Gelernte direkt üben und anwenden können!

Agenda

  • Angular Einstieg
    • Was ist Angular?
    • Von AngularJS nach Angular
    • Das Angular-CLI
    • Angular-Projektaufbau und eine erste App
    • Was ist TypeScript?
    • Verwendung von Typen in TypeScript
    • Verwendung von Klassen in TypeScript
    • Verwendung von Schnittstellen in TypeScript
    • Verwendung von Generika in TypeScript
       
  • Angular Grundlagen
    • Wie eine Angular App geladen und gestartet wird
    • Angular ist komponentenbasiert
    • Erstellen einer neuen Angular-Komponente
    • Bedeutung von AppModule
    • Bedeutung der Komponentendeklaration
    • Benutzerdefinierte Angular-Komponenten erstellen undverwenden
    • Angular-Komponenten mit dem CLI anlegen
    • Angular-Komponenten verschachteln
    • Arbeiten mit Komponenten-Vorlagen
    • Arbeiten mit Komponenten-Stilen
    • Arbeiten mit Komponenten-Selektoren
    • Was ist Datenbindung?
    • String-Interpolation (Zeichenketten-Interpolation)
    • Property-Binding (Eigenschaften-Bindung)
    • Property-Binding im Vergleich zu String-Interpolation
    • Event-Binding (Ereignis-Bindung)
    • Gleichzeitige Bindung von Eigenschaften und Ereignissen
    • Weitergabe und Verwendung von Daten mittels Ereignisbindung
    • Zwei-Wege-Datenanbindung mit Hilfe des FormsModule
    • Kombination von Datenbindungen
    • Angular-Direktiven verstehen und anwenden
    • Bedingte Ausgabe mit ngIf
    • Alternative ngIf-Ausgabe mit einer else-Bedingung
    • Dynamisches CSS-Styling von Elementen mit ngStyle
    • CSS-Klassen dynamisch anwenden mit ngClass
    • Ausgabe von Listen mit ngFor
    • Nutzen des Index bei Verwendung von ngFor
       
  • Angular Komponenten und Datenanbindung im Detail
    • Angular-Apps in Komponenten aufteilen
    • Übersicht über die Eigenschaften- und Ereignis-Bindung
    • Bindung an benutzerdefinierte Eigenschaften
    • Zuweisen eines Alias zu benutzerdefinierten Eigenschaften
    • Zuweisen eines Alias zu benutzerdefinierten Ereignissen
    • Zusammenfassung der benutzerdefinierten Eigenschaften und der Ereignisbindung
    • Verständnis der View-Kapselung
    • Lokale Referenzen in Vorlagen verwenden
    • Zugriff auf die Vorlage und das DOM mit @ViewChild erhalten
    • Projektion von Inhalten in Komponenten mit ng-content
    • Verständnis des Komponentenlebenszyklus
    • Zugriff auf ng-content mit @ContentChild erhalten
    • Bindung an benutzerdefinierte Ereignisse
       
  • Angular Direktiven im Detail
    • ngFor und ngIf
    • ngClass und ngStyle
    • Erstellen einer einfachen Attribut-Direktive
    • Verwendung des Renderers zum Aufbau einer erweitertenAttribute-Direktive
    • Host-Ereignisse mit HostListener abfangen
    • Host-Eigenschaften mit HostBinding binden
    • Direktiven und Datenbindung
    • Konzept von Struktur-Direktiven
    • Aufbau einer Struktur-Direktive
    • Einsatz von ngSwitch
       
  • AngularServices und Dependency Injection
    • Verstehender Angular Dependency Injection
    • Gründe für den Einsatz von Services
    • Erstellen eines einfachen Angular-Service
    • Einbinden des Angular-Service in Komponenten
    • Erstellen eines Angular-Datendienstes
    • Services in Services einfügen und verwenden
    • Dienste für die komponentenübergreifende Kommunikationnutzen
       
  • Angular Routing
    • Warum brauchen wir einen Router?
    • Einrichten und Laden von Routen
    • Navigieren mit Router-Links
    • Verstehen von Navigationspfaden
    • Styling des aktiven Router-Links
    • Programmgesteuertes Navigieren
    • Verwendung relativer Pfade in der programmatischen Navigation
    • Parameter an Routen übergeben
    • Routenparameter holen
    • Routenparameter reaktiv laden
    • Ein wichtiger Hinweis zu Route Observables
    • Übergabe von Query-Parametern und Fragmenten
    • Abrufen von Query-Parametern und Fragmenten
    • Einrichten von verschachtelt Child-Routen
    • Query-Parameter verwenden
    • Konfiguration der Handhabung von Query-Parametern
    • Routen-Umleitung und Wildcard-Routen
    • Die Umleitungspfadanpassung
    • Auslagerung der Routen-Konfiguration in Router-Module
    • Routen schützen und absichern mit Guards
    • Routenschutz mit canActivate
    • Schützen von verschachtelten Child-Routen mitcanActivateChild
    • Verwenden eines Authentifizierungs-Service
    • Steuerung der Navigation mit canDeactivate
    • Statische Daten an eine Route übergeben
       
  • Angular und Observables mit RxJSAngular und RxJS
    • Verstehen von Observables, Observer, Subscriber
    • Entwicklung und Nutzung eines Observables
    • Die Unsubscribe-Methode
    • Verstehen und Anwenden der RxJS-Operatoren
    • Einsatz von RxJS-Subjects
       
  • Angular und Formulare
    • Einführung in Formulare mit Angular
    • Template-Driven versus Reactive Forms
    • Formular erstellen und Controls registrieren
    • Formular abschicken und verwenden
    • Formularzustände verstehen
    • Zugriff auf Formulare mit @ViewChild
    • HTML5-Validierung hinzufügen
       
  • Angular und Pipes
    • Einführung über Pipes
    • Typische Anwendung von Pipes
    • Angular-Pipes kennen und verwenden
    • Parametrisieren von Pipes
    • Verkettung mehrerer Pipes
    • Erstellen einer benutzerdefinierten Pipe
    • Parametrisieren einer benutzerdefinierten Pipe
    • Die "async"-Pipe
       
  • HTTP-Anfragen in Angular
    • Wie HTTP-Anfragen in SPAs funktionieren
    • Senden von GET-Anfragen
    • Senden von POST, PUT, DELETE-Anfragen
    • Transformieren von Daten mit dem map-Operator
    • Einsatz von HttpClient und Datentypen
    • Verarbeiten der zurückgegebenen Daten
    • Abfangen von HTTP-Fehlern
    • Der "catchError"-Operator
    • Nutzen eines Interceptors
    • Verwendung der "async"-Pipe mit HTTP-Requests
       
  • Authentifizierung und Schutz von Routen in Angular
    • Wie Authentifizierung in Single-Page-Anwendungenfunktioniert
    • Erstellen einer Anmeldeseite und einer Route
    • Benutzer registrieren
    • Benutzer anmelden
    • Anfordern und senden eines Authentifizierungstoken
    • Überprüfen und Verwenden des Authentifizierungsstatus
    • Hinzufügen einer Abmelde-Funktion
    • Beispiel für Routenschutz und Umleitung
       
  • Module in Angular
    • Die Idee hinter Angular-Modulen
    • Verständnis des App-Moduls
    • Verständnis von Feature-Modulen
    • Reihenfolge der Modul-Importe
    • Registrieren von Routen in einem Feature-Modul
    • Verstehen und Erstellen von gemeinsamen Modulen
    • Laden von Komponenten über Selektoren versus Routing
    • Anwendung des Lazy Loading
    • Wie Module und Services zusammenwirken
    • Template-Interaktion & Produktionsbuilds
    • Wie man AoT Compilation (Vorab-Kompilierung) mit dem CLI verwendet
    • Vorladen von Lazy Loading-Routen
       
  • Bereitstellen einer Angular-Anwendung
    • Bereitstellungsvorbereitungen
    • Bereitstellung im Internet
       
  • Optional: NgRX – Zustandsverwaltung in Angular
    • Die Bedeutung der Zustandsverwaltung
    • Die Struktur von NgRX
    • Ein einfaches NgRx-Beispiel
       
  • Optional: Testing in Angular
    • Aufbau der Angular-Testing-Welt
    • Unit-Tests verstehen und anwenden
    • E22-Tests verstehen und anwenden

Teilnehmerkreis und Voraussetzungen

Entwickler, Programmierer mit Erfahrung in HTML, CSS, JavaScript, die mit Angular moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.

Mindestanzahl Teilnehmende: 2 Personen

Schulungstermine

Current Month

Sie können den Kurs auch als Firmenschulung buchen.

FIRMENSCHULUNG zu dem Thema?

Dieses Kursthema bieten wir Ihnen auch als maßgeschneiderte Firmenschulung an.

Bitte nehmen Sie Kontakt auf

Das sagen Kursteilnehmer