Vorwort... 3 Angular CLI: Der Codegenerator für unser Projekt Vorstellung Installation Die wichtigsten Befehle...

Größe: px

Ab Seite anzeigen:

Download "Vorwort... 3 Angular CLI: Der Codegenerator für unser Projekt Vorstellung Installation Die wichtigsten Befehle..."

Ludo Bastian Koenig
vor 6 Jahren
Abrufe

1 D3kjd3Di38lk323nnm xv Vorwort vii I Einführung 1 1 Haben Sie alles, was Sie benötigen? Visual Studio Code Google Chrome mit Augury Paketverwaltung mit Node.js und NPM Codebeispiele in diesem Buch Schnellstart Die erste Angular-Anwendung aufsetzen HTML-Grundgerüst erstellen Den Modul-Loader konfigurieren Die Startdatei für das Bootstrapping anlegen Das zentrale Angular-Modul anlegen Eine erste Komponente anlegen Den Webserver starten Retrospektive Angular CLI: Der Codegenerator für unser Projekt Vorstellung Installation Die wichtigsten Befehle II TypeScript 25 4 Einführung in TypeScript Was ist TypeScript und wie setzen wir es ein? Variablen: const, let und var Getter und Setter Die wichtigsten Basistypen

2 xvi 4.5 Klassen Interfaces Operatoren und Funktionen Dekoratoren III BookMonkey 2: Schritt für Schritt zur App 45 5 Projekt- und Prozessvorstellung Unser Projekt: Der BookMonkey Projekt mit Angular CLI initialisieren Style-Framework Semantic UI einbinden Komponenten & Template-Syntax: Iteration I Komponenten: Die Grundbausteine der Anwendung Komponenten Komponenten in der Anwendung verwenden Template-Syntax Den BookMonkey erstellen Property Bindings: Mit Komponenten kommunizieren Komponenten verschachteln Eingehender Datenfluss mit Property Bindings Andere Arten von Property Bindings DOM-Propertys in Komponenten auslesen Den BookMonkey erweitern Event Bindings: Auf Ereignisse in Komponenten reagieren Native DOM-Events Eigene Events definieren Den BookMonkey erweitern Powertipp: Styleguide Services & Routing: Iteration II Dependency Injection: Code in Services auslagern Abhängigkeiten anfordern Eingebaute Abhängigkeiten Abhängigkeiten bereitstellen Den BookMonkey erweitern Routing: Durch die Anwendung navigieren Routen konfigurieren Routing-Modul einbauen Komponenten anzeigen Root-Route Routen verlinken

3 xvii Routenparameter Verschachtelung von Routen Routenweiterleitung Aktive Links stylen Route programmatisch wechseln Den BookMonkey erweitern Powertipp: Chrome Developer Tools HTTP & reaktive Programmierung: Iteration III HTTP: Ein Server-Backend anbinden Das HTTP-Modul einbinden Einfache Requests mit der Http-Klasse Benutzerdefinierte Anfragen mit der Request-Klasse Request erweitern: Zusätzliche Header Den BookMonkey erweitern RxJS: Reaktive Programmierung Observables Operatoren Den BookMonkey erweitern Powertipp: Augury Formularverarbeitung & Validierung: Iteration IV Angulars Ansätze für Formulare Template Driven Forms Template Driven Forms verwenden NgModel und NgModelGroup Eingaben validieren Den BookMonkey erweitern Reactive Forms Reactive Forms verwenden Den FormBuilder verwenden Vorhandene Validatoren nutzen Den BookMonkey erweitern Custom Validators Validatoren für einzelne Formularfelder Validatoren für Formulargruppen und -Arrays Asynchrone Validatoren Den BookMonkey erweitern

4 xviii 13 Pipes & Direktiven: Iteration V Pipes: Daten im Template formatieren Pipes verwenden Die Sprache einstellen Integrierte Pipes für den sofortigen Einsatz Eigene Pipes entwickeln (Custom Pipes) Pipes in Komponenten nutzen Den BookMonkey erweitern Direktiven: Das Vokabular von HTML erweitern Was sind Direktiven? Eine erste eigene Direktive schreiben Attributdirektiven Strukturdirektiven Den BookMonkey erweitern Module & fortgeschrittenes Routing: Iteration VI Die Anwendung modularisieren: Das Modulkonzept von Angular Module in Angular Grundaufbau eines Moduls Bestandteile eines Moduls deklarieren Anwendung in Feature-Module aufteilen Aus Modulen exportieren: Shared Module Den BookMonkey erweitern Lazy Loading: Angular-Module asynchron laden Warum Module asynchron laden? Lazy Loading verwenden Module asynchron vorladen: Preloading Den BookMonkey erweitern Guards: Routen absichern Grundlagen zu Guards Guards implementieren Guards verwenden Den BookMonkey erweitern Resolver: Asynchrone Daten vorladen Warum Resolver verwenden? Resolver aufsetzen Resolver in Routen verwenden Daten in einer Komponente abrufen Den BookMonkey erweitern

5 xix 14.5 Routing: Wie geht s weiter? Routenparameter asynchron laden Mehrere RouterOutlets verwenden Darstellung der URLs ändern: LocationStrategies Internationalisierung: Iteration VII i18n: Mehrere Sprachen und Kulturen anbieten Was bedeutet Internationalisierung? Nachrichten mit dem i18n-attribut markieren Nachrichten extrahieren und übersetzen Feste IDs vergeben JIT: Die App mit Übersetzungsdatei laden AOT: Die App statisch mit Übersetzungsdatei bauen Den BookMonkey erweitern Powertipp: POEditor Qualität fördern mit Softwaretests Softwaretests Arten von Tests Test-Framework Jasmine Test-Runner Karma E2E-Test-Runner Protractor Tests mit Karma Die Testbibliothek von Angular Isolierte Unit-Tests (Services und Pipes testen) Shallow Unit-Tests: Einzelne Komponenten testen Integrationstests: Mehrere Komponenten testen Abhängigkeiten durch Stubs ersetzen Abhängigkeiten durch Mocks ersetzen HTTP-Requests testen Komponenten mit Routen testen Asynchronen Code testen Fazit Tests mit Protractor Auf die Balance kommt es an Protractor verwenden Elemente selektieren: Locators Aktionen durchführen Asynchron mit Warteschlange Redundanz durch Page Objects vermeiden Eine Angular-Anwendung testen Fazit

6 xx IV Das Projekt ausliefern: Deployment Das Projekt ausliefern: Deployment Umgebungen konfigurieren Umgebungen am Beispiel: BookMonkey Produktivmodus aktivieren Build erzeugen Die Templates kompilieren Just-In-Time-Kompilierung (JIT) Ahead-Of-Time-Kompilierung (AOT) Webserver konfigurieren und die App ausliefern Ausblick: Automatisches Deployment V Weiterführende Themen NativeScript: Mobile Anwendungen entwickeln Mobile Apps entwickeln Was ist NativeScript? Warum NativeScript? Hinter den Kulissen Plattformspezifischer Code Widgets und Layouts Styling NativeScript und Angular Angular als Native App Den BookMonkey mit NativeScript umsetzen Powertipp: Android-Emulator Genymotion Redux: Den Application State verwalten Was ist Redux? Was sind Reducer? Reducer verwalten den Anwendungsstatus Actions Angular-Services und Actions Redux im Projekt einbinden Components mit Redux verwenden Container und Presentational Components Weiterführendes Den BookMonkey mit Redux umsetzen Powertipp: Redux DevTools

7 xxi 23 Wissenswertes Plattformen und Renderer Lifecycle-Hooks Change Detection Transklusion: Inhalt des Host-Elements verwenden Eigenes Two-Way Binding Else-Block für die ngif-direktive Upgrade von Angular 1.x Nachwort VI Anhang 527 A Befehle der Angular CLI B Matcher von Karma C Abkürzungsverzeichnis D Linkliste Index Literaturverzeichnis

Ähnliche Dokumente

Inhaltsverzeichnis. Teil 1 Node.js... 1

Inhaltsverzeichnis. Teil 1 Node.js... 1 xiii Teil 1 Node.js... 1 1 Was ist Node.js? 3 1.1 Die Zeitalter des Webs................................... 3 1.1.1 1990 bis 2000: Das Web 1.0....................... 3 1.1.2 2000 bis 2010: Das Web 2.0.......................