Angular
Rheinwerk (Verlag)
978-3-8362-3914-1 (ISBN)
- Titel erscheint in neuer Auflage
- Artikel merken
Einführung, Praxis, TypeScript und RxJS
Formulare, Routing, HTTP-Anbindung, Animationen, I18N, reaktive Anwendungen, Performance-Tuning
Alles, was Angular-Entwickler wissen sollten – zum Lernen und Nachschlagen. Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Angular-Frameworks vertraut. Ein durchgehendes Praxisbeispiel führt Ihnen die Komponenten praxisnah vor und zeigt, wie Sie Angular für eigene Projekte professionell einsetzen. Inkl. Zusammenstellung der Features von TypeScript und ECMAScript 2015.
Lernen Sie die Möglichkeiten von Angular in der Praxis kennen!
- Alle Grundlagen: Installation der Software, Komponenten erstellen, Technologien verstehen
- Angular-Konzepte an einem durchgehenden Beispielprojekt verstehen
- Alles, was professionelle Angular-Entwickler wissen müssen – aktuell ab Angular 2.2
Angular ist das JavaScript-Framework für professionelle Webapplikationen – hier lernen Sie es umfassend kennen!
Am Praxisbeispiel einer Projektverwaltung führt Ihnen der Webprofi Christoph Höller die Komponenten und Konzepte von Angular praxisnah vor. Formulare, Routing per HTTp-Anbindung und Testing – hier lernen Sie Schritt für Schritt, wie Sie eigene Angular-Webapplikationen erstellen. Inkl. einer umfassenden Zusammenstellung der Features von TypeScript und ECMAScript 2015 im Anhang.
Starten Sie in die Entwicklung mit Angular
Lassen Sie sich zeigen, wie Sie lauffähige Webapplikationen mit Angular erstellen: Sie installieren die benötigte Software und lernen die relevanten Technologien und Konzepte detailliert kennen. Schon bald verfassen Sie Ihre eigenen Komponenten in TypeScript.
Lernen Sie die Angular-Konzepte am Beispielprojekt
Eine Projektverwaltung ist das ideale Beispiel, um die Grundbausteine einer Angular-Anwendung kennenzulernen: Von Formularen und Routing über HTTP-Anbindung und Testing finden Sie alles, was Sie für die Entwicklung vollwertiger Applikationen benötigen.
Alles für professionelle Angular-Entwickler
Falls Sie bei Ihrer Arbeit mit Angular einmal etwas nachschlagen müssen, werden Sie auch im umfangreichen Anhang fündig. Hier sind für Sie die wichtigsten TypeScript- und ECMAScript-2015-Features übersichtlich aufbereitet.
Themen sind insbesondere:
Wichtige Grundlagen
Komponenten & Direktiven
Pipes, Services, Dependency-Injection
Angular-CLI
Modularisierung
Formulare
HTTP-Anbindung
Echtzeitunterstützung
Internationalisierung
Animationen
Performance-Optimierung
ECMAScript 2015, TypeScript, RxJS
Christoph Höller ist selbstständiger IT-Consultant in Köln. Seine fachlichen Schwerpunkte liegen auf der Konzeption hochverfügbarer Unternehmensapplikationen sowie auf der Entwicklung von responsiven Webapplikationen mit JavaScript und Angular.
Geleitwort des Fachgutachters ... 21
Einleitung ... 23
1. Angular-Kickstart: Ihre erste Angular-Webapplikation ... 25
1.1 ... Installation der benötigen Software ... 25
1.2 ... Hallo Angular ... 27
1.3 ... Die Blogging-Anwendung ... 40
1.4 ... Zusammenfassung und Ausblick ... 55
2. Das Angular-CLI: professionelle Projektorganisation für Angular-Projekte ... 57
2.1 ... Das Angular-CLI installieren ... 58
2.2 ... ng new: Ein Grundgerüst für die Applikation erstellen ... 58
2.3 ... ng init: Ihr Projekt auf die neueste Angular-CLI-Version updaten ... 65
2.4 ... ng serve: die Anwendung starten ... 66
2.5 ... npm start: Start über die lokale CLI-Version ... 68
2.6 ... ng generate: Komponenten generieren ... 69
2.7 ... ng lint: Linting und der Angular-Style-Guide ... 72
2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 74
2.9 ... CSS-Präprozessoren verwenden ... 77
2.10 ... Drittanbieter-Bibliotheken einbinden ... 77
2.11 ... ng build: deploybare Builds erstellen ... 79
2.12 ... Build-Targets und Environments: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 79
2.13 ... Der AOT-Modus ... 81
2.14 ... Zusammenfassung und Ausblick ... 82
3. Komponenten und Templating: der Angular-Sprachkern ... 85
3.1 ... Etwas Theorie: der Angular-Komponentenbaum ... 85
3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 89
3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 92
3.4 ... Komponentenschnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 112
3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponentenklasse ... 123
3.6 ... Content-Insertion: dynamische Komponentenhierarchien erstellen ... 126
3.7 ... Der Lebenszyklus einer Komponente ... 136
3.8 ... Zusammenfassung und Ausblick ... 147
4. Direktiven: Komponenten ohne eigenes Template ... 149
4.1 ... ElementRef und Renderer: Manipulation von DOM-Eigenschaften eines Elements ... 150
4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 154
4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 157
4.4 ... Anwendungsfall: Accordion-Direktive -- mehrere Kind-Komponenten steuern ... 161
4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 164
4.6 ... Zusammenfassung und Ausblick ... 166
5. Fortgeschrittene Komponentenkonzepte ... 169
5.1 ... Styling von Angular-Komponenten ... 169
5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 178
5.3 ... ViewContainerRef und ComponentFactory: Komponenten zur Laufzeit hinzufügen ... 186
5.4 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 196
5.5 ... Zusammenfassung und Ausblick ... 210
6. Standarddirektiven und Pipes: wissen, was das Framework an Bord hat ... 213
6.1 ... Standarddirektiven ... 214
6.2 ... Pipes: Werte vor dem Rendern transformieren ... 226
6.3 ... Zusammenfassung und Ausblick ... 247
7. Services und Dependency-Injection: lose Kopplung für Ihre Business-Logik ... 249
7.1 ... Grundlagen der Dependency-Injection ... 250
7.2 ... Services in Angular-Applikationen ... 252
7.3 ... Das Angular-Dependency-Injection-Framework ... 253
7.4 ... Verwendung des DI-Frameworks in Angular-Applikationen ... 261
7.5 ... Injection by Type: Vereinfachungen für TypeScript-Nutzer ... 269
7.6 ... Sichtbarkeit und Lookup von Dependencys ... 272
7.7 ... Zusammenfassung und Ausblick ... 279
8. Template-Driven Forms: einfache Formulare auf Basis von HTML ... 281
8.1 ... Grundlagen zu Formularen: template-driven oder reaktiv? ... 283
8.2 ... Das erste Formular: Übersicht über die Forms-API ... 283
8.3 ... NgModel im Detail: Two-Way-Data-Binding oder nicht? ... 289
8.4 ... Kurzexkurs: Verwendung von Interfaces für die Definition des Applikationsmodells ... 294
8.5 ... Weitere Eingabeelemente ... 296
8.6 ... Verschachtelte Eigenschaften definieren ... 303
8.7 ... Validierungen ... 304
8.8 ... Implementierung der Tags-Liste: wiederholbare Strukturen mit Template-Driven Forms ... 321
8.9 ... Zusammenfassung und Ausblick ... 324
9. Model-Driven Forms: Formulare dynamisch in der Applikationslogik definieren ... 327
9.1 ... Aktivierung von Model-Driven Forms für Ihre Applikation ... 328
9.2 ... Das Task-Formular im modellgetriebenen Ansatz ... 328
9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 349
9.4 ... Fallbeispiel: Umfragebogen -- Formulare komplett dynamisch definieren ... 350
9.5 ... Die Forms-API im Überblick ... 357
9.6 ... Zusammenfassung und Ausblick ... 360
10. Routing: Navigation innerhalb der Anwendung ... 363
10.1 ... Project-Manager: die Beispielanwendung ... 364
10.2 ... Die erste Routenkonfiguration: das Routing-Framework einrichten ... 365
10.3 ... Location-Strategien: »schöne URLs« vs. »Routing ohne Server-Konfiguration« ... 370
10.4 ... ChildRoutes: verschachtelte Routenkonfigurationen erstellen ... 373
10.5 ... RouterLinkActive: Styling des aktiven Links ... 379
10.6 ... Routing-Parameter: dynamische Adresszeilenparameter auswerten ... 381
10.7 ... Aus der Anwendungslogik heraus navigieren ... 392
10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 394
10.9 ... Redirects und Wildcard-URLs ... 400
10.10 ... Data: statische Metadaten an Routen hinterlegen ... 402
10.11 ... Resolve: dynamische Daten über den Router injizieren ... 403
10.12 ... Der Title-Service: den Seitentitel verändern ... 406
10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 408
10.14 ... Location: direkte Interaktion mit der Adresszeile des Browers ... 411
10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 413
10.16 ... Zusammenfassung und Ausblick ... 419
11. HTTP: Anbindung von Angular-Applikationen an einen Webserver ... 421
11.1 ... Die Server-Applikation ... 422
11.2 ... Das Angular-HTTP-Modul verwenden ... 426
11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 427
11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 431
11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 434
11.6 ... URLSearchParams: elegant dynamische Suchen definieren ... 435
11.7 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 438
11.8 ... JSONP ... 447
11.9 ... Die Http-API im Detail: Überblick über die wichtigsten Klassen des Frameworks ... 451
11.10 ... Zusammenfassung und Ausblick ... 454
12. Reaktive Architekturen mit RxJS ... 457
12.1 ... Kurzeinführung in RxJS ... 458
12.2 ... Implementierung einer Typeahead-Suche ... 465
12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 474
12.4 ... Anbindung von WebSockets zur Implementierung einer Echtzeitanwendung ... 491
12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 496
12.6 ... Zusammenfassung und Ausblick ... 497
13. Komponenten- und Unit-Tests: das Angular-Testing-Framework ... 501
13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponententests in Angular-Anwendungen ... 502
13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 506
13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponententests mit dem Angular-Testing-Framework ... 511
13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 516
13.5 ... Services und HTTP-Backends testen ... 524
13.6 ... Formulare testen ... 529
13.7 ... Direktiven und ngContent-Komponenten testen ... 536
13.8 ... async und fakeAsync: mehr Kontrolle über asynchrone Tests ... 539
13.9 ... Routing-Funktionalität testen ... 541
13.10 ... Zusammenfassung und Ausblick ... 545
14. Integrationstests mit Protractor ... 547
14.1 ... Start der Tests und Konfiguration von Protractor ... 548
14.2 ... Anpassung der Applikationskonfiguration über Environments ... 550
14.3 ... Das browser-Objekt und Locators: Übersicht über die Kernbestandteile von Protractor ... 552
14.4 ... Page-Objects: Trennung von Testlogik und technischen Details ... 558
14.5 ... Formulare und Alert-Boxen testen: der Edit-Task-Test ... 561
14.6 ... Seitenübergreifende Workflows testen ... 564
14.7 ... Debugging von Protractor-Tests ... 568
14.8 ... Screenshots anfertigen ... 570
14.9 ... Zusammenfassung ... 573
15. NgModule und Lazy-Loading: Modularisierung Ihrer Anwendungen ... 575
15.1 ... Feature-Modules: Teilbereiche der Applikation kapseln ... 576
15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 584
15.3 ... Lazy-Loading von Applikationsbestandteilen ... 591
15.4 ... entryComponents: dynamisch geladene Komponenten registrieren ... 594
15.5 ... Zusammenfassung und Ausblick ... 595
16. Der Angular-Template-Compiler, Ahead-of-time Compilation und Tree-Shaking ... 597
16.1 ... Grundlagen zum Angular-Template-Compiler ... 598
16.2 ... Der Ahead-of-time Compilation-Modus: Leistungsschub für Ihre Anwendung ... 600
16.3 ... Tree-Shaking der Anwendung mit Rollup ... 602
16.4 ... Implementierungsregeln beim Einsatz von AOT ... 605
16.5 ... Zusammenfassung und Ausblick ... 608
17. ECMAScript 5: Angular-Anwendungen auf klassische Weise entwickeln ... 611
17.1 ... Hello ES5 ... 612
17.2 ... Kalender und Timepicker in ES5 ... 616
17.3 ... Zusammenfassung ... 626
18. Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 627
18.1 ... Die Grundlagen des i18n-Frameworks ... 628
18.2 ... ng-xi18n: automatische Generierung der Message-Datei ... 632
18.3 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 636
18.4 ... Weitere Übersetzungstechniken ... 637
18.5 ... Pluralisierung und geschlechterspezifische Texte ... 639
18.6 ... Statisch übersetzte Applikationen im AOT-Modus generieren ... 646
18.7 ... Zusammenfassung und Ausblick ... 649
19. Das Animations-Framework: Angular-Anwendungen animieren ... 651
19.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 652
19.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 656
19.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 659
19.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 661
19.5 ... Animation von Routing-Vorgängen ... 662
19.6 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 665
19.7 ... Styling von Komponenten, die in Animationen verwendet werden ... 667
19.8 ... Groups und Sequences: mehrere Animationen kombinieren ... 668
19.9 ... Zusammenfassung ... 671
19.10 ... Schlusswort ... 672
A. ECMAScript 2015 ... 675
B. Typsicheres JavaScript mit TypeScript ... 727
Index ... 775
| Erscheinungsdatum | 31.01.2017 |
|---|---|
| Reihe/Serie | SAP PRESS |
| Verlagsort | Bonn |
| Sprache | deutsch |
| Maße | 168 x 240 mm |
| Gewicht | 1572 g |
| Einbandart | gebunden |
| Themenwelt | Informatik ► Web / Internet ► JavaScript |
| Informatik ► Web / Internet ► Web Design / Usability | |
| Schlagworte | Angular • AngularJS • AngularJS (Framework) • Barrierefreiheit • Dependency-Injection • ECMAScript 2015 • ECMAScript 6 • JavaScript • Mobile Apps • RxJS • Testing • TypeScript • Webapplikation • Websockets |
| ISBN-10 | 3-8362-3914-0 / 3836239140 |
| ISBN-13 | 978-3-8362-3914-1 / 9783836239141 |
| Zustand | Neuware |
| Informationen gemäß Produktsicherheitsverordnung (GPSR) | |
| Haben Sie eine Frage zum Produkt? |
aus dem Bereich
