Beschreibung
![New Elements GmbH / IT-Schulungen.com](https://img.emg-services.net/institutes/institute43795/24-07-2024-header.png)
In dieser 5-tägigen Schulung "Angular Kompaktkurs" lernen Sie die Grundlagen von TypeScript und ECMAScript 6 (ES6) sowie eine umfassende Einführung in Angular, einschließlich Komponenten, Module und die Verwendung der Angular CLI. Der Kurs behandelt Themen wie Datenbindung, Direktiven und Pipes. Sie werden auch fortgeschrittene Konzepte wie Komponentenkommunikation, Dependency Injection und Reactive Forms kennenlernen. Weitere Schwerpunkte sind die Kommunikation mit dem Server über den HttpClient, die Konfiguration des Routers und Best Practices für die Bereitstellung Ihrer Angular-Anwendung. Der Kurs bietet außerdem Einblicke in Ivy, die neue Compilation & Rendering Pipeline, Unit-Tests mit Jasmine und Karma, RxJS und Observables sowie Sicherheitsaspekte wie XSS-Prävention und Authentifizierung.
Kommende Starttermine
Kommende Starttermine
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
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
Lernmethodik
Die Schulung bietet Ihnen eine ausgewogene Mischung aus Theorie und Praxis in einer erstklassigen Lernumgebung. Profitieren Sie vom direkten Austausch mit unseren projekterfahrenen Trainern und anderen Teilnehmern, um Ihren Lernerfolg zu maximieren.
Inhouse/Firmenseminar
Zielgruppe / Voraussetzungen
Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:
- Erfahrung in HTML, CSS, JavaScript
Zielgruppe
- Web-Entwickler
- Web-Programmierer
Infos anfordern
![New Elements GmbH / IT-Schulungen.com](http://img.emg-services.net/institutes/institute43795/logos/logo.png)
New Elements GmbH / IT-Schulungen.com
Unter dem Namen IT-Schulungen.com betreibt die Nürnberger New Elements GmbH seit über zwei Jahrzehnten eines der bedeutendsten Bildungszentren im deutschsprachigen Raum. Das Bildungszentrum befindet sich im renommierten Nordostpark in Nürnberg, in den industriehistorisch berühmten Räumlichkeiten der Bell-Laboratories von Alcatel-Lucent. Das...
Erfahren Sie mehr über New Elements GmbH / IT-Schulungen.com und weitere Kurse des Anbieters.