Angular für Dummies

 
 
Wiley-VCH (Verlag)
  • erschienen am 8. Februar 2019
  • |
  • 326 Seiten
 
E-Book | ePUB mit Adobe-DRM | Systemvoraussetzungen
978-3-527-81311-7 (ISBN)
 
Mit diesem Buch finden Sie einen schnellen Einstieg in das JavaScript-Framework Angular und in TypeScript. Sobald die Entwicklungsumgebung installiert ist, bauen Sie Ihre Angular-Fertigkeiten Schritt für Schritt aus. Mit den fertigen Code-Beispielen zum Herunterladen können Sie experimentieren. Anschließend sind Sie in der Lage, bei Angular-Webprojekten mitzureden und mitzutun. Für das Verständnis des Buchs sind lediglich HTML-, CSS- und JavaScript-Kenntnisse notwendig.
1. Auflage
  • Deutsch
  • Newark
  • |
  • Deutschland
  • 6,78 MB
978-3-527-81311-7 (9783527813117)
weitere Ausgaben werden ermittelt
Nikolas Poniros ist Berater und Trainer für Webtechnologien in Darmstadt. Er arbeitet meistens im Frontend mit Angular und hin und wieder im Backend mit Node.js. In seiner Freizeit beschäftigt er sich mit neuen (Web-)Technologien.
  • Intro
  • Titelseite
  • Impressum
  • Inhaltsverzeichnis
  • Über den Autor
  • Einleitung
  • Konventionen in diesem Buch
  • Was Sie nicht lesen müssen
  • Törichte Annahmen über die Leser
  • Wie dieses Buch aufgebaut ist
  • Symbole, die in diesem Buch verwendet werden
  • Wie es weitergeht
  • Teil I: Die ersten Schritte
  • Kapitel 1: Die Werkzeuge
  • Die Entwicklungsumgebung
  • Node.js und npm
  • Texteditoren
  • Der TypeScript-Compiler
  • TSLint, codelyzer und Prettier
  • Das Hauptwerkzeug: Angular CLI
  • Die Beispielanwendung tritt auf
  • Beispielanwendung: Umgebung einrichten
  • Kapitel 2: Die erste Angular-Anwendung
  • Die Bausteine einer Angular-Anwendung
  • Angular-Module
  • Arten von Angular-Modulen
  • Komponenten
  • Services - Ein Ort für die Logik
  • Die Hauptdatei der Anwendung
  • Beispielanwendung: Erste Schritte
  • Kapitel 3: Modularer Aufbau
  • Der Komponentenbaum
  • Komponenten und ihre Kinder
  • Der Lebenszyklus einer Komponente
  • Dumme und kluge Komponenten
  • Beispielanwendung: Neue Komponenten
  • Teil II: Mit dem Nutzer interagieren
  • Kapitel 4: Der Nutzer und was er sieht
  • Daten anzeigen
  • Auf Ereignisse reagieren
  • Das Aussehen verändern
  • Teile der Ansicht bedingt anzeigen
  • Beispielanwendung: Daten anzeigen
  • Kapitel 5: Daten vom Nutzer bekommen
  • Formulare in Angular
  • Ein einfaches Formular implementieren
  • Komplexere Formulare implementieren
  • Beispielanwendung: Daten bekommen
  • Kapitel 6: Nutzereingaben validieren
  • Grundlagen
  • Validierung in Template-gesteuerten Formularen
  • Validierung in Modell-gesteuerten Formularen
  • Validierungsfehler anzeigen
  • Eigene Validierungsfunktionen
  • Beispielanwendung: Eingabe validieren
  • Teil III: Mit dem Server kommunizieren
  • Kapitel 7: Grundlagen der Server-Kommunikation
  • Webserver
  • Reaktive Programmierung mit RxJS
  • Das HTTP-Modul
  • Der HttpClient-Service
  • Beispielanwendung: API-Server
  • Kapitel 8: Datenaustausch mit einem REST-Server
  • Voraussetzungen
  • Daten vom Server anfordern
  • Daten an den Server schicken
  • Daten löschen
  • Anfrageparameter
  • Auf die HttpResponse-Instanz zugreifen
  • Eigene Headers definieren
  • Fehlerbehandlung
  • Beispielanwendung: Datenaustausch
  • Teil IV: Routing
  • Kapitel 9: Routing: Grundlagen
  • Was ist Routing?
  • Der Angular-Router
  • Routing-Module
  • Komponenten anzeigen
  • Navigieren mit dem Angular-Router
  • Parametrisierte Pfade
  • Routing in der Beispielanwendung
  • Kapitel 10: Weitere Router-Features
  • Verschachtelte Routes
  • Angular-Module nachladen
  • Bedingte Navigation
  • Daten mit dem Router übergeben
  • Navigationsereignisse
  • Umleitungen
  • Beispielanwendung: Login
  • Teil V: Die Anwendung testen
  • Kapitel 11: Unit-Tests
  • Was sind Unit-Tests?
  • Jasmine
  • Unit-Tests ausführen
  • Angular-Test-Module definieren
  • Services testen
  • Bausteine mit Abhängigkeiten testen
  • Tests mit dem HttpClient
  • Komponenten testen
  • Die Beispielanwendung Unit-testen
  • Kapitel 12: End-to-End-Tests
  • Was sind End-to-End-Tests?
  • Protractor
  • Tests mit Protractor schreiben
  • Seitenobjekte
  • End-to-End-Tests ausführen
  • Timeouts
  • Die Beispielanwendung testen
  • Teil VI: Der Top-Ten-Teil
  • Kapitel 13: Zehn Angular-Bibliotheken
  • Angular Material
  • ng-bootstrap
  • ngx-bootstrap
  • PrimeNG
  • NgRx
  • ag-Grid
  • NGX-Translate
  • Augury
  • Angular Universal
  • Ionic
  • Kapitel 14: (Nicht ganz) Zehn Angular-Informationsquellen
  • Angular-Dokumentations-Webseite
  • Angular-Blog
  • Angular GitHub-Repository
  • Gitter
  • Stack Overflow
  • Angular in Depth
  • AngularJS.DE
  • Angular University
  • Awesome Angular
  • A: Einführung in TypeScript
  • Basistypen
  • Funktionen
  • Interfaces
  • Klassen
  • Generische Typdefinitionen
  • Stichwortverzeichnis
  • End User License Agreement

Kapitel 1

Die Werkzeuge


IN DIESEM KAPITEL

  • Werkzeuge kennenlernen
  • Entwickeln mit Angular und TypeScript
  • Angular CLI
  • Die Entwicklungsumgebung einrichten

Wer mit Angular und TypeScript eine Webanwendung entwickeln möchte, braucht als Erstes eine Entwicklungsumgebung. Dieses Kapitels will Ihnen helfen, solch eine Entwicklungsumgebung aufzusetzen. Ich zeige Ihnen die verschiedenen Werkzeuge, die Sie dazu brauchen, und was diese tun. Am Ende des Kapitels lernen Sie die Beispielanwendung kennen.

Die Entwicklungsumgebung


Vor gar nicht so langer Zeit reichten noch ein Texteditor, ein Browser und ein Webserver aus, um zumindest eine kleinere Webanwendung schreiben zu können. Wenn Sie aber mit Angular und TypeScript arbeiten wollen, benötigen Sie auch für die kleinste Webanwendung wesentlich mehr Werkzeuge: Sie brauchen eine Entwicklungsumgebung, die unter anderem die folgenden Programme beziehungsweise Werkzeuge beinhaltet:

  • Node.js
  • npm
  • den TypeScript-Compiler
  • einen Texteditor
  • einen Webserver
  • einen Browser

Dazu kommen oft noch weitere Werkzeuge für das Testen der Webanwendung, das Formatieren und Minimieren des Codes und natürlich für die Überprüfung des Codes auf Fehler.

Leider reicht es nicht aus, die Werkzeuge zu installieren. Diese müssen auch konfiguriert werden. Um den Entwicklern eine bisschen Arbeit abzunehmen, hat das Angular-Team Angular CLI entwickelt. Mithilfe dieses Werkzeugs können Sie mit wenig Aufwand ein neues Angular-Projekt starten. Mehr über Angular CLI erfahren Sie im Abschnitt Das Hauptwerkzeug: Angular CLI.

Node.js und npm


Node.js ist eine Laufzeitumgebung für JavaScript. Damit können Sie Kommandozeilenwerkzeuge, Webserver und vieles mehr entwickeln und ausführen. Werkzeuge wie Gulp, Grunt, Karma, ESLint, JSHint kennen Sie vielleicht schon. Eines haben sie alle gemeinsam: Sie wurden in JavaScript geschrieben und werden mit Node.js ausgeführt. Der TypeScript-Compiler und Angular CLI sind da keine Ausnahmen. Aus diesem Grund brauchen Sie Node.js für die Entwicklung einer Angular-Anwendung.

Npm ist ein weiteres wichtiges Element im Werkzeugkasten jedes Webentwicklers. Es wird benutzt, um Pakete zu verwalten. Diese Pakete, auch als npm-Pakete bekannt, können JavaScript, CSS, HTML und mehr beinhalten. Sie definieren npm-Pakete als Abhängigkeiten Ihres Projekts. Beispielsweise hängt ein Angular-Projekt, unter anderem, vom @angular/core-npm-Paket und vom typescript-npm-Paket ab.

In einer Konfigurationsdatei definieren Sie die Abhängigkeiten Ihres Projekts, die Sie im Nachgang dann mit npm installieren. Die Konfigurationsdatei heißt package.json. Alle npm-Pakete, die Sie dort definieren, können nur innerhalb des Projekts verwendet werden. Diese werden deshalb lokale npm-Pakete genannt. Lokale npm-Pakete befinden sich im Verzeichnis node_modules innerhalb Ihres Projektverzeichnisses.

Im Listing 1.1 sehen Sie einen Ausschnitt aus einer package.json-Datei. Neben dem Namen (name-Eigenschaft) und der Version (version-Eigenschaft) sehen Sie dort noch die Eigenschaften dependencies, devDependencies und scripts. Die Ersten beiden sind Objekte, die die Namen und Versionen von Abhängigkeiten beinhalten. Im dependencies-Objekt stehen alle Abhängigkeiten, die Ihre Anwendung zum Laufen braucht. Im devDependencies-Objekt stehen Abhängigkeiten, die nur bei der Entwicklung, aber nicht mehr zur Laufzeit gebraucht werden. Im scripts-Objekt stehen Skripte, die Sie über npm ausführen können. Beispielsweise sind start der Name des Skripts und ng serve das Kommando, das ausgeführt wird (siehe den Abschnitt Das ng-serve-Kommando).

Listing 1.1: Ausschnitt aus einer package.json-Datei. Diese wurde von Angular CLI generiert.

Allgemein führen Sie npm-Skripte mit npm run Skriptname aus. Es gibt einige Skripte, wie zum Beispiel start und test, die Sie auch ohne run ausführen können. Welche Skripte das genau sind, können Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json nachlesen. Mit dem Kommando npm run sehen Sie alle Skripte, die in der package.json-Datei des Projekts definiert sind.

In der package.json-Datei haben der Zirkumflex (^) und die Tilde (~) vor einer Versionsnummer eine spezielle Bedeutung: Die Tilde fixiert die ersten beiden Zahlen der Version und nimmt für die dritte einfach die neuste. Der Zirkumflex fixiert die erste Zahl, für die anderen zwei wird die neuste Version genommen. Betrachten wir als Beispiel eine Abhängigkeit abc, von der die Versionen 6.0.0, 6.0.1 und 6.1.0 existieren. Wenn in der package.json 6.0.0 steht, wird für die Abhängigkeit die Version 6.0.0 installiert. Wenn dort ~6.0.0 steht, wird die Version 6.0.1 installiert. Wenn dort ^6.0.0 steht, dann wird die Version 6.1.0 installiert.

Neuere npm-Versionen erzeugen zusätzlich zum node_modules-Verzeichnis auch eine Datei namens package-lock.json. Dort stehen alle npm-Pakete, die sich im node_modules-Verzeichnis befinden, mit ihrer jeweiligen Version. Falls Sie ein Werkzeug für die Versionierung Ihres Codes verwenden, wie zum Beispiel git, sollten Sie diese Datei auch hinzufügen. Sie stellt sicher, dass nachträgliche Installationen die exakt gleichen Versionen von den Abhängigkeiten besitzen.

Npm erlaubt auch die Installation von globalen npm-Paketen. Diese Pakete können dann in jedem Projekt verwendet werden. Meistens installieren Sie Kommandozeilenwerkzeuge, wie zum Beispiel Angular CLI, global.

Wie Sie Node.js und npm installieren, erfahren Sie im Abschnitt Beispielanwendung: Umgebung einrichten.

Mehr über die package.json erfahren Sie auf der Webseite von npm unter https://docs.npmjs.com/files/package.json. Mehr über die package-lock.json erfahren Sie auf https://docs.npmjs.com/files/package-lock.json. Auf der npm-Webseite finden Sie auch weitere Informationen über das Werkzeug und seine Features. Falls Sie noch nie mit npm gearbeitet haben, empfehle ich Ihnen, zumindest den Getting Started-Teil zu lesen. In der Regel haben Versionen in der package.json drei Zahlen, die mit Punkten getrennt werden. Hinter diesen Versionsbezeichnungen steckt eine Versionierungsprozess namens Semantic Versioning. Auch Angular folgt diesem Prozess. Mehr darüber erfahren Sie auf https://semver.org/lang/de/.

Texteditoren


Theoretisch können Sie bei der Entwicklung jeden beliebigen Texteditor nutzen. Allerdings sind nicht alle Texteditoren gleich gut für die Entwicklung von Angular-Anwendungen geeignet. Sie sollten einen Texteditor auswählen, der mindestens Syntax-Highlighting und Code-Vervollständigung für TypeScript unterstützt. Auch die Unterstützung von Code-Refactoring ist etwas, worauf Sie bei der Wahl eines Texteditors achten sollten. Gerade letzteres wird Ihnen, vor allem bei größeren Projekten, sehr helfen.

Ich nutze zwar hier den Term »Texteditor«, ich meine damit aber auch integrierte Entwicklungsumgebungen (IDEs). Ich unterscheide nicht explizit zwischen den beiden Ausdrücken, da die meisten modernen Texteditoren sich mithilfe von Plugins zu integrierten Entwicklungsumgebungen umfunktionieren lassen.

In der Tabelle 1.1 sehen Sie vier Texteditoren, die gut für die Entwicklung von Angular-Anwendungen geeignet sind. Alle vier funktionieren unter Windows, Linux und MacOS. Allerdings bieten die vier Editoren unterschiedliche Grade der TypeScript- beziehungsweise Angular-Unterstützung an. Falls Sie genügend Zeit haben, empfehle ich Ihnen, alle vier Texteditoren zu testen und denjenigen auswählen, der am besten zu Ihnen passt. Falls Sie die Zeit nicht haben, empfehle ich Ihnen Visual Studio Code, wozu Sie mindestens das Angular-Language-Service-Plugin installieren sollten.

Atom

Sublime Text

Visual Studio...

Dateiformat: ePUB
Kopierschutz: Adobe-DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Installieren Sie bereits vor dem Download die kostenlose Software Adobe Digital Editions (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie bereits vor dem Download die kostenlose App Adobe Digital Editions (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nicht Kindle)

Das Dateiformat ePUB ist sehr gut für Romane und Sachbücher geeignet - also für "fließenden" Text ohne komplexes Layout. Bei E-Readern oder Smartphones passt sich der Zeilen- und Seitenumbruch automatisch den kleinen Displays an. Mit Adobe-DRM wird hier ein "harter" Kopierschutz verwendet. Wenn die notwendigen Voraussetzungen nicht vorliegen, können Sie das E-Book leider nicht öffnen. Daher müssen Sie bereits vor dem Download Ihre Lese-Hardware vorbereiten.

Bitte beachten Sie bei der Verwendung der Lese-Software Adobe Digital Editions: wir empfehlen Ihnen unbedingt nach Installation der Lese-Software diese mit Ihrer persönlichen Adobe-ID zu autorisieren!

Weitere Informationen finden Sie in unserer E-Book Hilfe.


Download (sofort verfügbar)

23,99 €
inkl. 7% MwSt.
Download / Einzel-Lizenz
ePUB mit Adobe-DRM
siehe Systemvoraussetzungen
E-Book bestellen