+49 911 65008-222 info@it-seminare.de

Angular Kompaktkurs

Seminardauer: 5 Tage

Seminarinformationen

Seminar - Ziel

In diesem 5-tägigen Seminar "Angular Kompakt" erlernen Sie die Grundlagen von TypeScript und ECMAScript 6 (ES6) sowie eine umfassende Einführung in Angular, einschließlich der Arbeit mit Komponenten, Modulen und der Nutzung der Angular CLI. Der Kurs behandelt Themen wie Datenbindung, Direktiven und Pipes. Sie werden ebenfalls fortgeschrittene Konzepte wie die Kommunikation zwischen Komponenten, Dependency Injection und Reactive Forms kennenlernen. Weitere Schwerpunkte sind die Serverkommunikation über den HttpClient, die Router-Konfiguration und bewährte Methoden zur Bereitstellung Ihrer Angular-Anwendung. Der Kurs bietet zudem Einblicke in Ivy, die neue Kompilierungs- und Rendering-Pipeline, Unit-Tests mit Jasmine und Karma, RxJS und Observables sowie Sicherheitsaspekte wie XSS-Prävention und Authentifizierung.

Teilnehmer - Zielgruppe

  • Web-Entwickler
  • Web-Programmierer

Kurs - Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

  • Erfahrung in HTML, CSS, JavaScript

Seminardauer

  • 5 Tage
  • 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / Agenda

Grundlagen von TypeScript und ECMAScript 6 (ES6)

  • TypeScript-Installation, Konfiguration und Kompilierung
  • Typ-Annotationen
  • Klassen
  • Scoping mit let-, var- und const-Keywords
  • Arrow-Funktionen
  • ES-Module
  • Dekoratoren
  • Template-Literale
  • Spread-Syntax und Rest Parameter
  • Umstrukturierung

Übersicht über Angular

  • Vorteile des Programmierens mit Angular
  • Verständnis der Angular-Versionen
  • Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures
  • Angular Style Guide
  • Architektur von Angular
  • Angular im Vergleich zu anderen JavaScript-Bibliotheken und Frameworks (React, VueJS, etc...)
  • Ihre erste Angular-Anwendung

Komponenten

  • Verstehen von Komponenten
  • Komponenteneigenschaften und Methoden
  • Templates: Inline, Multi-line und Extern mit Komponenten-relativen Pfaden

Angular-Module (NgModule)

  • Angular-Module vs. ES-Module
  • Organisieren des Codes in Feature-Modulen

Projekt einrichten (Verwendung der Angular CLI)

  • Angular CLI-Funktionen
  • Erstellen eines neuen Projekts (mit neuen CLI-Eingabeaufforderungen)
  • Code generieren
  • Anpassen der Angular CLI

Daten-Bindung

  • Interpolation
  • Bindung von Eigenschaften
  • Ereignisbindung
  • Bidirektionale Datenbindung

Direktives

  • Strukturell: ngFor, ngIf, ngSwitch
  • Attribut: ngClass, ngStyle

Pipes

  • Built-in Pipes: Verwenden, Parameterübergabe, Verkettung

Fortgeschrittene Komponenten

  • Komponentenkommunikation mit @Input, @Output
  • Komponenten-Architektur
  • Komponenten-Stile
  • Lifecycle Hooks für Komponenten
  • Evaluierung von UI-Komponenten-Frameworks & Bibliotheken

Services & Dependency Injection

  • Verwendung eines Service für den Zugriff auf Daten
  • Verwendung eines Service, um Geschäftslogik zu kapseln
  • Verstehen des Umfangs von Diensten

Injektion von Abhängigkeiten

  • Verständnis von Dependency Injection
  • Angulars System zur Einspritzung von Abhängigkeiten
  • Registrieren
  • Injizieren

Modellgesteuerte Formulare (Reactive Forms)

  • Importieren des ReactiveFormsModuls
  • FormControl, FormGroup und AbstractControl
  • Binden von DOM-Elementen an FormGroups und FormControls
  • Validierungsregeln, Meldungen und Stile
  • Refactoring von Reactive Forms zur Wiederverwendung
  • Benutzerdefinierte Validatoren

Kommunikation mit dem Server unter Verwendung des HttpClient-Dienstes

  • Entscheiden zwischen Promises oder Observables (RxJS)
  • Eine HTTP-GET-Anfrage stellen
  • Senden von Daten an den Server mit Http POST- und PUT-Anfragen
  • Ausstellen einer HTTP DELETE-Anforderung
  • Abfangen von Requests und Responses

Router

  • Importieren des RouterModuls
  • Routes konfigurieren
  • Komponenten mit einem RouterOutlet anzeigen
  • Deklarativ navigieren mit RouterLink
  • Navigieren mit Code unter Verwendung des Routers
  • Zugriff auf Parameter mit ActivatedRoute

Bereitstellen einer Angular Application to Production

  • Erstellen einer Anwendung mit der Angular CLI
  • Differenzielles Laden: Erstellen eines modernen Builds (ES2015) und eines Legacy-Builds (ES5)
  • Bereitstellen auf einem Webserver

Ivy: Neue Compilation & Rendering Pipeline

  • Verstehen von Ivy
  • Ivy-Ziele
  • Vorteile von Ivy
  • Ivy-Bundle Sizes

Unit-Tests

  • Tools: Jasmine, Karma
  • Jasmine-Syntax: describe, it, beforeEach, afterEach, matchers
  • Setup und der erste Test
  • Test-Terminologie: Mock, Stub, Spy, Fakes
  • Angular Test-Terminologie: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
  • Einfacher Komponententest
  • Erkennen von Komponentenänderungen
  • Testen einer Komponente mit Eigenschaften ( Inputs ) und Ereignissen ( Outputs )
  • Testen einer Komponente, die den Router verwendet
  • Testen einer Komponente, die von einem Dienst abhängt
  • Testen eines Services und Mocking der HTTP Requests
  • Testen einer Pipe

RxJS und Observables

  • Was ist eine Observable?
  • Erstellen von Observables
  • Was ist ein Observer?
  • Observer Beispiel
  • Operatoren: map, switchMap, debounceTime, distinctUntilChanged
  • Praktische Anwendung der Verwendung von RxJS
  • Subjekt
  • Subjekt Example
  • EventEmitter oder Observable

Signals

  • Writable Signal und Computed Signal
  • Effect der Subscriber von Signals
  • Von Observable zu Signal

Security

  • Best Practices
  • Verhindern von Cross-Site Scripting (XSS)
  • Trusting values mit dem DOMSanitizer
  • HTTP-Angriffe (CSRF und CSSI)
  • Authentifizierung mit JSON-Web-Tokens (JWT)
  • Autorisierung: Router-Guards

Erkennung von Änderungen

  • Verständnis für Zone.js und Change Detection
  • Change Detection Strategies Default und OnPush

Erweitertes Angular CLI

  • Anpassen eines Builds mit Builder-APIs in der CLI
  • Erzeugen von Web Workers

Erweitertes Routing

  • Lazy-Loading von Angular-Modulen (mit dynamischen Importen)
  • Nested oder Child Routes

Erweiterte Dependency Injection

  • Provider
  • Hierarchische Injection
  • providedIn-Optionen: root, module, platform, any

Pipes

  • Erstellen einer benutzerdefinierten Pipe mit PipeTransform
  • Verstehen von Pure und Impure Pipes

Weitere Schulungen zu Thema Angular

Angular Fortgeschrittenenkurs

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In dieser 2-tägigen Schulung "Angular Advanced" erlernen Sie fortgeschrittene Methoden der Angular-Entwicklung, einschließlich Unit-Tests, reaktiver Programmierung mit RxJS und Sicherheitsstrategien. Sie werden mit den Test-Tools Jasmine und Karma arbeiten und die Nutzung von ...

TypeScript für Angular

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 2-tägigen Seminar "TypeScript für Angular" erhalten Sie grundlegende Kenntnisse und Techniken von TypeScript in Kombination mit Angular. Ziel des Seminars ist es, Ihnen eine stabile Basis zu vermitteln, um mit TypeScript effektiv in der Angular-Entwicklung arbeiten ...

Angular Grundkurs

- u.a. in Hamburg, Essen, Heidelberg, Offenbach, Nordhausen

In dieser 3-tägigen Schulung "Angular Einführung" erlernen Sie die Entwicklung dynamischer und reaktionsschneller Single-Page-Webanwendungen mit Angular. Sie erfahren, wie Sie Teile der aktuellen Seite flexibel anpassen und so eine verbesserte Nutzererfahrung bieten können, ...

Migration von AngularJS zu Angular

- u.a. in Berlin, Wien, Virtual Classroom, Kassel, Jena

In diesem 1-tägigen Seminar "Migration von AngularJS zu Angular" erfahren Sie verschiedene Strategien und übergeordnete Ansätze für den Wechsel von AngularJS. Sie erhalten eine konzeptionelle Abbildung von AngularJS auf Angular und lernen, wie der UpgradeAdapter genutzt ...