Ein Querschnitt durch Angular und ein Blick auf Angular 9

Wir wollen uns in einem Angular-Querschnitt die einzelnen Lösungsansätze und Prinzipien von Angular ansehen und kennenlernen.
Beginnend mit der Frage "Warum Angular - und der Unterschied zu Vue oder React" schauen wir uns nach und nach die einzelnen Bausteine inkl. kurzer Beispiele an. Ebenso werfen wir einen Blick auf Tools, die uns das Leben mit Angular erleichtern, z.B. die CLI, das Material Design oder die Möglichkeit aus Angular eine PWA zu machen.

Zum Schluss schauen wir uns kurz die wichtigen Änderungen der gerade veröffentlichten Version 9 von Angular an.

Transcript

2. THORSTEN.RINTELEN@TRAPERTO.COM WWW.TRAPERTO.COM WWW.GITHUB.COM/RINTYNATOR
5. Angular vs. React vs. Vue Angular Konzepte Components Services Pipes Directives Modules Routing - Guards / Resolver Angular Universum Angular 9
6. Angular (<9) React Vue.js Von Google Facebook Evan You (AngularJS) Was Framework Library Framework Downloads (npm) 1.5M 6.6M 1.4M Zielgruppe Große Projekte mittlere Projekt kleinere Projekte Bundle size + ++ +++ Performance ++ +++ +++ Mögl. Einsatz Eigene SPA Leicht integrierbar Leicht integrierbar Major Updates Alle 6 Monate unbestimmt unbestimmt
7. … SINGLE PAGE APPLICATION (SPA) … DEPENDENCY INJECTION (DI) … AUSTAUSCHBAR, DA WENIG ECHTE ANGULAR MAGIE … DATA BINDING (PROPERTY, EVENTS…) … ROUTING … CHANGE DETECTION … HTTPS://ANGULAR.IO/GUIDE/ARCHITECTURE
8. • Enthält • JavaScript • HTML • CSS (SASS, LESS…) • Optional alles in einer Datei (React) • Inputs mit @Input() • Outputs mit @Output() • Lifecycle Hooks • ngOnInit vs constructor • Dependency Injection (DI)
9. • Enthält z.B. • http request • Öffnen von Dialogen • Berechnungen • Daten übergreifend vorhalten • Instanzen kontrollieren über provideIn
10. • Auslagern von z.B. Formatierungen oder Übersetzungen (ngx-translate) • Verhalten sich wie Services • Nimmt Daten an (Inputs) sum | currency:EUR • Gibt einen bearbeiteten Wert zurück • Gut für die ChangeDetection
11. • Eine Direktive ist wie eine Komponente, nur ohne eigenes HTML und CSS • Zur Manipulation von vorhandenem HTML gedacht, z.B. für Klassen auf Button. • Structural directives • Markiert mit * • Typisch für löschen und hinzufügen • *ngIf und *ngFor
12. • Dient zur Strukturierung von großen Anwendungen • LazyLoading • Dependenci Injection (DI) • Steuerung Instanzen von Services • entryComponents wird entfallen • Konfigurationen per Injection Token
13. • Verschachtelung möglich • Aufpassen beim providen !
14. • Definition Pfade / Komponente • Hier werden LazyLoading Module definiert loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) • Daten können pro Route reingereicht werden • Dynamisch über URL • Als „data“ • Reagieren auf diverse Routing-Events, z.B. • NavigationStart • NavigationEnd • Auslagern in ein eigenes Modul wird empfohlen
15. • Resolver • resolve: { userData: LoadUserResolver }, • Laden Daten vor • Guards • canActivate: [IsAuthenticatedGuard], • Kontrollieren den Zugriff auf einzelne routes • CanActivate • CanDeactivate
16. • GUTE, AUSFÜHRLICH DOKUMENTATION • EIGENE LIBRARIES • ANGULAR CLI (NG G C NAME, NG SERVE, NG BUILD) • ANGULAR MATERIAL (HTTPS://MATERIAL.ANGULAR.IO/ • ANGULAR CDK (HTTPS://MATERIAL.ANGULAR.IO/CDK • PWA (PROGESSIVE WEB APPS) • ANGULAR SCHEMATICS • WEB WORKERS • UNTERSTÜTZUNG BEI UNITTESTING • TYPESCRIPT • RX(JS) (HTTPS://RXJS-DEV.FIREBASEAPP.COM/ • COMPODOC – AUTOMATISCHE DOKUMENTATION • NX (HTTPS://NX.DEV/
17. • IVY, DER NEUE RENDERER • KLEINERE BUNDLES • DEUTLICH SCHNELLERES RENDERING • ENTRYCOMPONENTS ENTFALLEN • LAZYLOADING VON KOMPONENTEN • TYPESCRIPT 3.7 • I18N FEATURES • ANY / PLATFORM FÜR PROVIDEIN