Angular Komplettkurs

Ziele

In diesem Kurs lernen Sie die Erstellung einer Single-Page-Application, TypeScript, Angular-Systemsprache und die Vorteile der komplexeren Funktionen des Frameworks kennen.

Zielgruppe

Web-Entwickler, Web-Programmierer mit Erfahrung mit HTML, CSS, JavaScript

Voraussetzungen

Gute JavaScript-Kenntnisse

Agenda

Einführung Typescript

• Überblick und Einordnung zu ECMA Script
• Basisdatentypen
• Konstanten und Variablen (let und var)
• Getter und Setter
• Klassen
• Interfaces
• Operatoren und Funktionen
• Dekoratoren

Angular- CLI - Projektorganisation

• ng-new - Ein Applikationsgrundgerüst
• ng-init – Projektupdate
• ng-serve – Anwendungsstart über Proxy
• ng-start – Anwendungsstart über cli
• ng-lint – Angular Style Guide

Drittanbieter Bibliotheken Einbindung

• CSS Präprozessor verenden
• Bootstrap verwenden
• Semantic UI einbinden

Angular - Komponenten

• Grundbausteine einer Anwendung
• Selektoren
• Property Binding – mit Komponenten kommunizieren
• Event Binding – Reaktion auf Ereignisse
• Komponentenschnittstellen definieren (Input-, Output-, Two-Way-Data- Bindings)
• Lebenszyklus einer Komponente

Angular - Direktiven (Html erweitern)

• Manipulation von DOM- Eigenschaften
• ElementRef
• HostListener
• Strukturdirektiven (*ngFor, *ngIf, [ngSwitch])
• Standarddirektiven
• Pipes

Angular – Services

• Dependency Injection – Code in Services auslagern
• Abhängigkeiten anfordern
• Eingebaute Abhängigkeiten
• Bereitstellung von Abhängigkeiten

Angular – Routing

• Routen konfigurieren
• Routing- Parameter
• Routing in Module einbauen
• Routen verlinken
• Routen verschachteln
• Weiterleitung

Angular - Http

• Einfache Requests mit http
• Benutzerdefinierte Anfragen über die Request-Klasse
• Request erweitern mit zusätzlichen Header
• JSONP

Angular – Reaktive Programmierung (RxJS)

• Observables
• Operatoren

Angular – Formulare

• Template Driven Forms
• Reactive Forms
• Eigene Validatoren

Angular – Module

• Modulkonzept
• Aufteilung in Module
• Shared Module
• Lazy Loading von Modulen
• Routen absichern
• Asynchrone Daten vorladen
• Modulloader (Webpack und SystemJS)

Einführung Softwaretest

• Tests mit Karma
• Test mit Protractor
• Tests mit Jasmine

Projekt Deployment

• ng-build – deploybare Builds erstellen
• Applicationstatus verwalten mit Redux – Übersicht
• AOT – Modus