Kursüberblick
Angular ist das Nummer 1 Framework um SPA (Single Page Applications) Web Applikationen zu erstellen. Angular verwendet TypeScript, Dependency Injection, und die ReactiveX Library for JavaScript (RxJS). Angular ermöglicht es modulare, testbare, und einfach erweiterbare SPA Applikationen zu erstellen.
Voraussetzungen
Programmierkenntnisse und Basis Kenntnisse von HTML und JavaScript werden benötigt.
Kursinhalt
- Einführung in Angular und Web Tools
- Programmieren mit TypeScript
- Applikations-Architektur mit Angular
- Navigation mit dem Angular Router
- Dependency Injection
- Binding, Observables und Pipes
- Kommunikation zwischen Komponenten
- Erstellen von Formularen
- Zugriff auf Server mit HTTP und WebSockets
- Unit Testing und E2E Testing
Einführung in Angular und Web Tools
Mit der Einführung in Angular bekommen Sie einen Einstieg in Single Page Applications (SPA) und die Vorteile von Angular. Sie bekommen einen Einstieg in die große Zahl der Tools die heute bei der Entwicklung von Webapplikationen praktisch sind. Im Kurs verwenden Sie *Git* um von *GitHub* Kurs-Samples zu clonen, wir vergleichen *NuGet* mit *NPM*, und sie erfahren mehr über Packages mit *WebPack*. Sie bekommen einen Überblick zu Task Runners wie *NPM Scripts*, *Grunt* und *Gulp*, und verwenden Code Analyzer wie *TSLint*. Sie bekommen einen Überblick zu Unit Tests und End-to-End (E2E) tests mit *Jasmin*, *Karma* und *Protractor*. Scaffolding lernen Sie mit *Yeoman* und *Angular CLI*. Das Command-Line Interface zu Angular, Angular CLI, wird im Kurs verwendet während Sie die unterschiedlichsten Features bei Angular kennenlernen.
Einführung in TypeScript
Es hat gute Gründe warum das Angular Team *TypeScript* wählte. Sie lernen die Unterschiede von TypeScript zu *JavaScript*, was den *ECMA* Standard ausmacht und wie sich TypeScript von *ECMAScript* unterscheidet. Sie lernen den TypeScript Compiler *tsc* zu verwenden und den speziellen TypeScript Syntax für das Erstellen von Typen, Klassen, Interfaces und Namespaces. Für Angular ganz wichtig sind auch *Decorators* und *Modules*.
Applikations-Architektur mit Angular
Gleich nach dem Einstieg zu TypeScript lernen Sie die wichtigsten Building Blocks einer Angular Applikation, und wie diese Building Blocks zusammenspielen. Sie lernen das Erstellen und Verwenden von *Modulen*, erstellen *Komponenten* mit *Metadaten* und *Templates*, verknüpfen Templates mit Komponenten mit Hilfe von Property- und Event Binding, und greifen auf *Services* mit Hilfe des *Injectors* zu.
Navigation with the Angular Router
Auch wenn bei Angular alles am Client läuft, können verschiedene Bereiche der Angular Applikation über Links aufgerufen werden. Mit Hilfe des Router Modules lernen Sie das Konfigurieren von Root und Child Routes, können sich zwischen *Hash-basierter* Navigation und der *History API* entscheiden, definieren Links mit *routerlink* und implementieren dynamisches Nachladen von Modulen.
Dependency Injection
*Dependency Injection* ist ein wichtiges Thema bei Angular Applikationen. Sie lernen wie dieser Pattern mit Angular implementiert ist. Sie lernen Services zu injecten, und erfahren mehr über die Hierarchie von *Injectors*.
Binding, Pipes, and Observables
Nachdem Sie bei der Applikations-Architektur mit Angular schon die Grundzüge vom *Binding* gelernt haben geht es jetzt geht es zu den Details. Sie lernen One-Way Property- und Event-Binding, die Structural Direktiven wie z.B. *ngFor* und *ngIf*, das Erstellen von *Pipes* um Werte für die Ausgabe zu transformieren. Hier gibt es auch einen Einstieg in die *Reactive Programmierung* und *Observables*, die bei der Angular API zahlreich zum Einsatz kommen.
Communication between Components
Die Angular Komponenten sind loose gekoppelt. Kommunikation zwischen diesen Komponenten erfolgt mit klar definierten Interfaces. Sie lernen dazu unterschiedliche Varianten, z.B. die Kommunikation zwischen Parent/Child Komponenten mit *input* und *output* Properties. Der *Mediator* Pattern wird eingesetzt. Sie lernen auch Kommunikation zwischen Komponenten mit Hilfe von Services, und ändern Templates zur Laufzeit mit *ngContent*.
Forms
Bei Angular gibt es zwei Möglichkeiten für das Erstellen von Formularen: *Template-basiert*, und *Reactive*. Sie lernen beide Varianten - die einfachere mit Template-basierten Formularen, und Reactive Formulare für erweiterte programmatische Kontrolle. Sie lernen auch den Einsatz von Standard Validators, und erstellen auch eigene.
Observables, Promises und Aufrufe von Services
Nachdem bis jetzt alles am Client abläuft, erfolgt jetzt die Kommunikation mit dem Server. Sie lernen *HttpModule* um über das *Http* Objekt Requests an ein ASP.NET Web API Service zu schicken. Die public Members der Http Klasse lieferen *Observable* Objekte zurück. Damit steigen wir tiefer in Reactive Programming ein. Sie lernen auch wie statt Observables JavaScript Promises verwendet werden können, und bekommen einen Einstieg in *WebSockets*.
Unit Testing and E2E Testing
Zum Abschluß darf Testing nicht zu kurz kommen. Sie lernen das Erstellen von Unit Tests und E2E Tests. Dabei verwenden Sie *Jasmine*, *Karma* und *Protractor*.