GEDOPLAN

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.

Schulungstermine

Current Month

No Events

Diese Schulung bieten wir auch als maßgeschneiderte Firmenschulung an

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulung.
Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt.
Bei Interesse nehmen Sie bitte Kontakt, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch

Firmenschulung anfragen

Sie brauchen eine maßgeschneiderte Schulung?

GEDOPLAN erstellt für Sie auf Ihre Unternehmensziele zugeschnittene Firmenschulungen. Durch unser modulares Schulungssystem sind wir in der Lage, anhand Ihrer Angaben eine individuelle Schulung zu gestalten. Denn die optimale Weiterbildung Ihrer Mitarbeiter nach Ihren Vorgaben und Anforderungen stehen bei uns im Mittelpunkt. Bei Interesse nehmen Sie bitte Kontakt mit uns auf, wir führen dann gerne mit Ihnen ein unverbindliches Gespräch.

GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

Tim.Neumann@GEDOPLAN.de

Firmenschulung anfragen

Weitere Schulungen

Vorträge & News zum Thema
Es wurden keine Ergebnisse gefunden.

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

News aus Schulung, Beratung & Softwareentwicklung

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Das sagen Kursteilnehmer

Unsere Trainer

Unsere Trainer

Unsere Trainer

Kontakt

Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!

Tim Neumann

Geschäftsleitung
GEDOPLAN - Telefonkontakt

030 / 20 89 82 63 0

GEDOPLAN - E-Mail Kontakt

info@gedoplan.de

GEDOPLAN GmbH
Stieghorster Straße 60
33605 Bielefeld

GEDOPLAN GmbH
Kantstraße 164
10623 Berlin

    Kontakt

    Tim Neumann

    Geschäftsleitung
    GEDOPLAN - Telefonkontakt

    030 / 20 89 82 63 0

    GEDOPLAN - E-Mail Kontakt

    info@gedoplan.de

    GEDOPLAN GmbH
    Stieghorster Straße 60
    33605 Bielefeld

    GEDOPLAN GmbH
    Kantstraße 164
    10623 Berlin

    Brauchen Sie eine individuelle IT-Schulung, eine fundierte Beratung oder eine individuelle Softwareentwicklung? Dann sind Sie hier genau richtig!