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

Angular Grundkurs

Seminardauer: 3 Tage

Seminarinformationen

Seminar - Ziel

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, ohne eine neue Seitenanfrage zu stellen. Der Fokus des Kurses liegt auf der Nutzung von ES6, TypeScript sowie modernen Front-End-Werkzeugen wie npm und Webpack, um Anwendungen effizient zu erstellen. Nach Abschluss des Kurses sind Sie in der Lage, mit Angular Anwendungen zu entwickeln und die Vorteile fortschrittlicher Webentwicklungstechniken zu nutzen.

Teilnehmer - Zielgruppe

  • Web-Entwickler
  • Softwareentwickler
  • Programmierer

Kurs - Voraussetzungen

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

  • Grundkenntnisse in JavaScript und TypeScript sind von Vorteil

Seminardauer

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

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / Agenda

Einführung

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

Weitere Schulungen zu Thema Angular

Angular Kompaktkurs

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

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 ...

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 ...

Reaktive Programmierung mit Angular

- u.a. in Bremen, Nürnberg, Mannheim, Erfurt, Freiburg

In diesem 1-tägigen Seminar "Reaktive Programmierung mit Angular" erfahren Sie, wie reaktive Benutzeroberflächen entwickelt werden können, um schnell und effizient auf Benutzerinteraktionen und Datenänderungen zu reagieren. Die Schulung behandelt wesentliche Konzepte wie ...

Angular Unit Testing mit Jasmine

- u.a. in Berlin, Essen, Darmstadt, Offenbach, Kassel

In diesem 2-tägigen Seminar "Angular Unit Testing mit Jasmine" lernen Sie die Grundlagen des Testens und dessen Anwendung in Angular mithilfe des Standard-Testframeworks Jasmine in Verbindung mit dem Testrunner Karma. Sie werden zudem mit der entsprechenden Terminologie ...