Produktbild: Angular

Angular Das umfassende Handbuch

Aus der Reihe Rheinwerk Computing
0

39,90 €

inkl. gesetzl. MwSt., Versandkostenfrei


Beschreibung

Produktdetails

Einband

Gebundene Ausgabe

Erscheinungsdatum

03.03.2022

Verlag

Rheinwerk

Seitenzahl

1016

Maße (L/B/H)

24,6/18/6,1 cm

Gewicht

1992 g

Farbe

Anthrazit / Orangerot

Auflage

3

Sprache

Deutsch

ISBN

978-3-8362-8243-7

Beschreibung

Produktdetails

Einband

Gebundene Ausgabe

Erscheinungsdatum

03.03.2022

Verlag

Rheinwerk

Seitenzahl

1016

Maße (L/B/H)

24,6/18/6,1 cm

Gewicht

1992 g

Farbe

Anthrazit / Orangerot

Auflage

3

Sprache

Deutsch

ISBN

978-3-8362-8243-7

Herstelleradresse

Rheinwerk Verlag GmbH
Rheinwerkallee 4
53227 Bonn
DE

Email: GPSR Kontakt

Noch keine Bewertungen vorhanden

Verfassen Sie die erste Bewertung zu diesem Artikel

Helfen Sie anderen Kundinnen und Kunden durch Ihre Meinung.

Kundinnen und Kunden meinen

Bewertungen (0)

Weitere Artikel findest du in

Die Leseprobe wird geladen.
  • Produktbild: Angular







  •   Materialien zum Buch ... 25









      Vorwort ... 27









      1.  Angular-Kickstart: Ihre erste Angular-Webapplikation ... 31









           1.1 ... Installation der benötigten Software ... 31






           1.2 ... Hallo Angular ... 33






           1.3 ... Die Blogging-Anwendung ... 43






           1.4 ... Zusammenfassung und Ausblick ... 59












      2.  Das Angular-CLI: professionelle Projektorganisation für Angular-Projekte ... 61









           2.1 ... Das Angular-CLI installieren ... 62






           2.2 ... ng new: ein Grundgerüst für die Applikation erstellen ... 62






           2.3 ... ng serve: die Anwendung starten ... 69






           2.4 ... npm start: Start über die lokale CLI-Version ... 73






           2.5 ... ng generate: Komponenten generieren ... 74






           2.6 ... ng update: Angular und weitere Abhängigkeiten auf die neueste Version updaten ... 78






           2.7 ... ng lint: Linting und der Angular-Style-Guide ... 80






           2.8 ... Komponenten- und Ende-zu-Ende-Tests ausführen ... 82






           2.9 ... CSS-Präprozessoren verwenden ... 85






           2.10 ... Drittanbieter-Bibliotheken einbinden ... 86






           2.11 ... ng add: Angular-spezifische Abhängigkeiten zu Ihrer Anwendung hinzufügen ... 87






           2.12 ... ng build: deploybare Builds erstellen ... 90






           2.13 ... Configurations: Konfiguration unterschiedlicher Build- und Ausführungsumgebungen ... 92






           2.14 ... ng deploy: die Anwendung im Web deployen ... 97






           2.15 ... Zusammenfassung und Ausblick ... 101












      3.  Komponenten und Templating: der Angular-Sprachkern ... 103









           3.1 ... Etwas Theorie: der Angular-Komponenten-Baum ... 103






           3.2 ... Selektoren: vom DOM-Element zur Angular-Komponente ... 107






           3.3 ... Die Templating-Syntax: Verbindung zwischen Applikationslogik und Darstellung ... 110






           3.4 ... Komponenten-Schnittstellen definieren: von der einzelnen Komponente zur vollständigen Applikation ... 129






           3.5 ... ViewChildren: Zugriff auf Kind-Elemente aus der Komponenten-Klasse ... 140






           3.6 ... Content-Insertion: dynamische Komponenten-Hierarchien erstellen ... 143






           3.7 ... Der Lebenszyklus einer Komponente ... 153






           3.8 ... Zusammenfassung und Ausblick ... 164












      4.  Direktiven: Komponenten ohne eigenes Template ... 167









           4.1 ... ElementRef und Renderer2: Manipulation von DOM-Eigenschaften eines Elements ... 168






           4.2 ... HostBinding und HostListener: Auslesen und Verändern von Host-Eigenschaften und -Events ... 172






           4.3 ... Anwendungsfall: Einbinden von Drittanbieter-Bibliotheken ... 174






           4.4 ... Anwendungsfall: Accordion-Direktive -- mehrere Kind-Komponenten steuern ... 178






           4.5 ... exportAs: Zugriff auf die Schnittstelle einer Direktive ... 181






           4.6 ... Zusammenfassung und Ausblick ... 183












      5.  Fortgeschrittene Komponenten-Konzepte ... 185









           5.1 ... Styling von Angular-Komponenten ... 185






           5.2 ... TemplateRef und NgTemplateOutlet: dynamisches Austauschen von Komponenten-Templates ... 196






           5.3 ... ViewContainerRef: Komponenten zur Laufzeit hinzufügen ... 204






           5.4 ... NgComponentOutlet: dynamisch erzeugte Komponenten noch einfacher verwalten ... 213






           5.5 ... ChangeDetection-Strategien: Performance-Boost für Ihre Applikation ... 217






           5.6 ... Zusammenfassung und Ausblick ... 230












      6.  Standarddirektiven und Pipes: wissen, was das Framework an Bord hat ... 233









           6.1 ... Standarddirektiven ... 234






           6.2 ... Pipes: Werte vor dem Rendern transformieren ... 247






           6.3 ... Zusammenfassung und Ausblick ... 270












      7.  Services und Dependency-Injection: lose Kopplung für Ihre Business-Logik ... 273









           7.1 ... Grundlagen der Dependency-Injection ... 274






           7.2 ... Services in Angular-Applikationen ... 276






           7.3 ... Das Angular-Dependency-Injection-Framework ... 277






           7.4 ... Weitere Provider-Formen ... 284






           7.5 ... Der hierarchische Injector-Baum: volle Flexibilität bei der Definition Ihrer Abhängigkeiten ... 288






           7.6 ... Treeshakable-Providers: der DI-Mechanimus auf den Kopf gestellt ... 296






           7.7 ... Sichtbarkeit und Lookup von Dependencys ... 297






           7.8 ... Zusammenfassung und Ausblick ... 304












      8.  Template-driven Forms: einfache Formulare auf Basis von HTML ... 307









           8.1 ... Grundlagen zu Formularen: template-driven oder reaktiv? ... 308






           8.2 ... Das erste Formular: Übersicht über die Forms-API ... 309






           8.3 ... NgModel im Detail: Two-Way-Data-Binding oder nicht? ... 315






           8.4 ... Kurzexkurs: Verwendung von Interfaces für die Definition des Applikationsmodells ... 319






           8.5 ... Weitere Eingabeelemente ... 322






           8.6 ... Verschachtelte Eigenschaften definieren ... 328






           8.7 ... Validierungen ... 330






           8.8 ... Implementierung der Tags-Liste: wiederholbare Strukturen mit Template-driven Forms ... 347






           8.9 ... updateOn: steuern, wann Änderungen übernommen werden ... 351






           8.10 ... Zusammenfassung und Ausblick ... 352












      9.  Reactive Forms: Formulare dynamisch in der Applikationslogik definieren ... 355









           9.1 ... Aktivierung von Reactive Forms für Ihre Applikation ... 356






           9.2 ... Das Task-Formular im reaktiven Ansatz ... 356






           9.3 ... Formulare und Kontrollelemente auf Änderungen überwachen ... 377






           9.4 ... Fallbeispiel: Umfragebogen -- Formulare komplett dynamisch definieren ... 378






           9.5 ... ControlValueAccessor: eigene Eingabeelemente für die Forms-API implementieren ... 385






           9.6 ... Zusammenfassung und Ausblick ... 394












    10.  Routing: Navigation innerhalb der Anwendung ... 397









           10.1 ... Project-Manager: die Beispielanwendung ... 398






           10.2 ... Die erste Routenkonfiguration: das Routing-Framework einrichten ... 399






           10.3 ... Location-Strategien: »schöne URLs« vs. »Routing ohne Server-Konfiguration« ... 404






           10.4 ... ChildRoutes: verschachtelte Routenkonfigurationen erstellen ... 407






           10.5 ... RouterLinkActive: Styling des aktiven Links ... 413






           10.6 ... Routing-Parameter: dynamische Adresszeilenparameter auswerten ... 416






           10.7 ... Aus der Anwendungslogik heraus navigieren ... 427






           10.8 ... Routing-Guards: Routen absichern und die Navigation generisch beeinflussen ... 429






           10.9 ... Redirects und Wildcard-URLs ... 436






           10.10 ... Data: statische Metadaten an Routen hinterlegen ... 439






           10.11 ... Resolve: dynamische Daten über den Router injizieren ... 439






           10.12 ... Der Title-Service: den Seitentitel verändern ... 442






           10.13 ... Router-Tree und Router-Events: generisch auf Seitenwechsel reagieren ... 444






           10.14 ... Location: direkte Interaktion mit der Adresszeile des Browsers ... 447






           10.15 ... Mehrere RouterOutlets: maximale Flexibilität beim Routing ... 449






           10.16 ... Zusammenfassung und Ausblick ... 455












    11.  HTTP: Anbindung von Angular-Applikationen an einen Webserver ... 457









           11.1 ... Die Server-Applikation ... 458






           11.2 ... Das Angular-HTTP-Modul verwenden ... 462






           11.3 ... Der erste GET-Request: Grundlagen zur HTTP-API ... 462






           11.4 ... Asynchrone Service-Schnittstellen modellieren: Anpassung des TaskService ... 466






           11.5 ... Die AsyncPipe: noch eleganter mit asynchronen Daten arbeiten ... 468






           11.6 ... HttpParams: elegant dynamische Suchen definieren ... 469






           11.7 ... Die observe-Eigenschaft: die komplette HttpResponse auswerten ... 472






           11.8 ... POST, PUT, DELETE, PATCH und HEAD: Verwendung der weiteren HTTP-Methoden ... 474






           11.9 ... JSONP ... 482






           11.10 ... Zusammenfassung und Ausblick ... 486












    12.  Reaktive Architekturen mit RxJS ... 489









           12.1 ... Kurzeinführung in RxJS ... 490






           12.2 ... Implementierung einer Typeahead-Suche ... 498






           12.3 ... Reaktive Datenarchitekturen in Angular-Applikationen ... 507






           12.4 ... Anbindung von Websockets zur Implementierung einer Echtzeitanwendung ... 524






           12.5 ... ChangeDetectionStrategy.OnPush: Performance-Schub durch die reaktive Architektur ... 530






           12.6 ... Zusammenfassung und Ausblick ... 531












    13.  Komponenten- und Unit-Tests: das Angular-Testing-Framework ... 533









           13.1 ... Karma und Jasmine: Grundlagen zu Unit- und Komponenten-Tests in Angular-Anwendungen ... 534






           13.2 ... Der erste Unit-Test: einfache Klassen und Funktionen testen ... 537






           13.3 ... Isolierte Komponenten testen: Grundlagen zu Komponenten-Tests mit dem Angular-Testing-Framework ... 543






           13.4 ... Mocks und Spies: Komponenten mit Abhängigkeiten testen ... 549






           13.5 ... Services und HTTP-Backends testen ... 555






           13.6 ... Formulare testen ... 560






           13.7 ... Direktiven und ngContent-Komponenten testen ... 566






           13.8 ... waitForAsync und fakeAsync: mehr Kontrolle über asynchrone Tests ... 569






           13.9 ... Routing-Funktionalität testen ... 572






           13.10 ... Die Tests auf Ihrem Build-Server ausführen ... 576






           13.11 ... Zusammenfassung und Ausblick ... 577












    14.  Cypress: komfortable Integrationstests für Ihre Anwendung ... 581









           14.1 ... Cypress zum Projekt hinzufügen und ausführen ... 582






           14.2 ... Cypress lokal und auf Ihrem Build-Server ausführen ... 583






           14.3 ... Cypress konfigurieren ... 587






           14.4 ... Cypress-Grundlagen: Ihre ersten eigenen Cypress-Tests ... 590






           14.5 ... Selektoren, Interaktion mit Elementen und weitere Assertion-Typen: den Tasks-Bereich testen ... 594






           14.6 ... cy.on: auf Browser-Events reagieren ... 601






           14.7 ... Intercept: REST-Requests untersuchen und manipulieren ... 602






           14.8 ... Custom Commands: Den Funktionsumfang von Cypress mit eigenen Kommandos dynamisch erweitern ... 609






           14.9 ... Screenshots und Video-Recordings: sehen, was schiefläuft ... 612






           14.10 ... Debugging von Cypress-Tests ... 615






           14.11 ... Die Cypress-Beispiele als Dokumentation nutzen ... 619






           14.12 ... Zusammenfassung und Ausblick ... 621












    15.  NgModule und Lazy-Loading: Modularisierung Ihrer Anwendungen ... 625









           15.1 ... Feature-Module: Teilbereiche der Applikation kapseln ... 626






           15.2 ... Shared-Modules: gemeinsam genutzte Funktionalität kapseln ... 634






           15.3 ... Module per Component: das höchste Level an Modularisierung ... 638






           15.4 ... Services und Modularisierung ... 640






           15.5 ... Lazy-Loading von Applikationsbestandteilen ... 647






           15.6 ... Zusammenfassung und Ausblick ... 651












    16.  Internationalisierung: mehrsprachige Angular-Anwendungen implementieren ... 653









           16.1 ... Einrichtung des i18n-Frameworks ... 654






           16.2 ... ng extract-i18n: automatische Generierung der Message-Datei ... 662






           16.3 ... Eigene Übersetzungsschlüssel definieren ... 664






           16.4 ... Description und Meaning: Metadaten für Übersetzer übergeben ... 665






           16.5 ... Weitere Übersetzungstechniken ... 666






           16.6 ... $localize: Texte aus dem TypeScript-Code heraus übersetzen ... 668






           16.7 ... Pluralisierung und geschlechtsspezifische Texte ... 670






           16.8 ... Zusammenfassung und Ausblick ... 677












    17.  Das Animation-Framework: Angular-Anwendungen animieren ... 679









           17.1 ... Die erste Animation: Grundlagen zum Animation-Framework ... 680






           17.2 ... void und *: spezielle States zum Hinzufügen und Entfernen von DOM-Elementen ... 684






           17.3 ... Animationen in Verbindung mit automatisch berechneten Eigenschaften ... 687






           17.4 ... Animation-Lifecycles: auf den Start und das Ende von Animationen reagieren ... 689






           17.5 ... Keyframes: Definition von komplexen, mehrstufigen Animationen ... 690






           17.6 ... Styling von Komponenten, die in Animationen verwendet werden ... 691






           17.7 ... Groups und Sequences: mehrere Animationen kombinieren ... 693






           17.8 ... Querying: komplexe Komponenten animieren ... 696






           17.9 ... Staggering: ausgefeilte Listenanimationen definieren ... 700






           17.10 ... Animation von Routing-Vorgängen ... 702






           17.11 ... Zusammenfassung und Ausblick ... 707












    18.  Vollendet in Form und Funktion: Material Design und Angular Material ... 709









           18.1 ... Material Design ... 710






           18.2 ... Angular Material ... 725






           18.3 ... Zusammenfassung ... 771












    19.  NPM-Librarys und Mono-Repos: Funktionalität in Bibliotheken auslagern und per NPM veröffentlichen ... 773









           19.1 ... Das Angular-CLI-Projekt einrichten ... 774






           19.2 ... Die generierte Bibliothek im Detail ... 777






           19.3 ... Die Bibliothek kompilieren und im Demo-Projekt einbinden ... 781






           19.4 ... Der Mono-Repo-Ansatz für die Entwicklung von mehreren Webapplikationen ... 784






           19.5 ... Die Bibliothek über npm veröffentlichen ... 788






           19.6 ... Best Practices für die Implementierung von stylebaren Komponenten ... 794






           19.7 ... Zusammenfassung und Ausblick ... 802












    20.  Angular Elements: Angular-Komponenten als WebComponents bereitstellen ... 805









           20.1 ... Einführung in Custom Elements und Angular Elements ... 806






           20.2 ... Angular-Komponenten als WebComponents bereitstellen ... 807






           20.3 ... Zoneless-Applications: Angular-Anwendungen unabhängig von Zone.js machen ... 816






           20.4 ... Den Build für die WebComponent-Auslieferung optimieren ... 818






           20.5 ... Die WebComponent in einem Angular-Projekt verwenden ... 819






           20.6 ... Die WebComponent in einem Vue-Projekt verwenden ... 822






           20.7 ... Zusammenfassung und Ausblick ... 826












    21.  Docker: Die Anwendung im Container deployen ... 829









           21.1 ... Deployment über nginx: das Docker-Image erstellen und als Container starten ... 830






           21.2 ... Multi-Stage Builds ... 835






           21.3 ... Die Anwendung über Umgebungsvariablen konfigurieren ... 840






           21.4 ... Zusammenfassung und Ausblick ... 848












    22.  Server-Side Rendering: Angular-Anwendungen auf dem Server rendern ... 851









           22.1 ... Einführung in Server-Side Rendering (SSR): Grundlagen und Vorteile ... 851






           22.2 ... Das Angular-Projekt für das Server-Side Rendering vorbereiten ... 854






           22.3 ... isPlatformServer und isPlatformBrowser: Wo bin ich gerade? ... 862






           22.4 ... Die State-Transfer-API: geladene Daten vom Server auf den Client transferieren ... 862






           22.5 ... Title-Service und Meta-Service: Suchmaschinen-Optimierung und Einbindung in Social-Media-Seiten leicht gemacht ... 867






           22.6 ... Notwendige Anpassungen am Project-Manager-Code: Stolperfallen und alternative Lösungsansätze beim Server-Side Rendering ... 870






           22.7 ... Die Anwendung in der Cloud deployen ... 876






           22.8 ... Zusammenfassung ... 889












      Anhang ... 891









           A ... ECMAScript 2015 (and beyond) ... 891






           B ... Typsicheres JavaScript mit TypeScript ... 947












      Index ... 1007