angular_toc.md

• Course Notes ngrx

  • after authentication is implemented:
    • actions
    • router/Resolver for loading courses
    • implement Effect for the action loadAllCourse
    • implement the reducer
    • use of ngrx EntityState
    • replace reload in home component by selectors
    • avoid fetching the courses from backend multiple times
    • remove the loading indicator for the courses
    • Editing Entity Data
    • Saving the Data
  • after authentication is implemented, alternative:
    • using ngrx Data
    • adding CRUD operations
    • implementing ngrx EntityData for course lessons

• Course Notes ngjs

  • Subjects
    • Implment a Store Service
    • implment save operation

• Angular basic building blocks

  • Dependency Injection
  • Services as Providers
  • add Bootstrap support
  • einfache app.component.html für Bootstrap
  • html - template
    • table mit bootstrap und fallunterscheidungen
  • NG-CONTAINER
  • Input Properties
    • Input properties über mehrere (ananoyme/generische) angular componenten hinweg übermitteln
  • Events
    • Binding
    • Observable von Eventquelle:
    • Event Emitters und Output Properties
  • Attribute Directives
  • Pagination
    • Installation
    • Verwendung
    • Anpassen der Pagesize vom User
  • Directives vs Components
  • Browser Tricks
    • Cache problem bei statischen Inhalten vermeiden
  • localen server starten
  • globale Variablen (z.B. für unterscheidung Prod / Test Environment)
  • update packages
  • Perform a basic update to the current stable release of the core framework and CLI by running the following command.
  • Livecycle Hooks
  • Query Parameter of Routes
  • @ViewChild()
  • Debugging:
  • using *ngIf with an boolean Observable

• Neues Projekt, neue Componenten

  • Neue Child-Component in Parent - Component:

  • neuen Service Client - Side

  • ClientService "GET"

  • A new Component using a Service

  • Install eslint und prettier

  • VisualCode eslint und prettier

  • command line

• HTML Elemente

  • ngFor loop i=0 to n

• Angular integration testing

  • e2e
  • cypress
    • cypress tutorial mit Angular default Seite
      • cypress.json
      • cypress tests
    • cypress tutorial mit Tour of Heroes

• Angular and jest (instead of karma/jasmine)

  • Links
  • new Angular Project with jest:
    • remarks:
  • Debug jests own errors:
  • Differences to karma/jasemine
  • jest CLI:
  • Jest config
  • VisualCode and jest-plugin:
    • only if that does not work:
  • Snapshot Testing
  • Manual Mocks
  • Spying on methods
  • run only a few tests:
  • end-to-end mit jest/cucumber
  • Jest Class Mocking
    • Automatic Mock for Classes
    • Pragmatic mocking
    • direkt jest.fn 1/2
    • direkt jest.fn 2/2

• Angular ngrx

  • Zusammenfassung:
  • Installation:
  • Scaffolding (Gerüst) für store config für ein Modul:
  • Store Service API
  • ngRx Actions
    • filter for ngrx actions
  • action-types.ts
  • Reducer
    • Metareducers
  • Use state for deciding on what to show in the UI
  • ngrx - specific custom operators for observables
  • mapping functions with memory for optimizing
    • reusing a selector function:
    • type safe feature selectors
    • get the complete state:
  • Effects Module
    • using createEffect() instead of constructor
    • mapping to another Action
  • Reducers vs. Effects
  • Debugging ngrx
  • rgrx Entities
    • native implementation:
    • better using ngrx EntitieState
    • optional arguments for createEntityAdapter()
    • Update
  • rgrx Selectors
    • getting observable from the store using selectors
  • NgRx Data
    • using MyClassEntityService in the Router Resolver
    • customize ngrx Data
    • defining a sort criterium in EntityMetadataMap
    • CRUD operations
    • loading entitys with query Params
  • changeDetection: ChangeDetectionStrategy.OnPush

• Architecture

  • effect vs Route Guard
  • Router effects
    • success case
      • or
    • error case
      • or

• Testing ngrx Store

  • with Mock-Store

  • with real ngrx store:

  • update packages

• Routing

  • Routes definieren
    • Beispiel Routes
  • Routes verwenden
    • Links zu Routes
    • lesen der Route/Parameter Component
  • Routes aus Typescript Methoden heraus aufrufen
  • Debug Routing
  • Eager vs lazy Loading for Routes
  • route guards: CanActivate
  • Router Resolver
    • Resolver with ngRx Data
  • Effects für loadAllCourses

• Basics:

  • subscribe()
    • Fazit:
      • oder:
      • oder:

• RXJS-Spezials

  • Observable >>Subjects<<
  • Rules for Subjects
  • other Subject Types
  • Reactive Forms
  • Observables vs Promise
  • Promise (oder normal call back ) zum Observable machen
  • Quelle eines Observable mit mehreren subscribern teilen
  • .pipe() debuggen mit tap()
  • Observable und Fehlerbehandlung

• timing helpers

  • normal JavaScript
  • RXJS
  • Operators for Observables
    • observable pipe(concatMap())
    • observable pipe(mergeMap())
    • observable pipe(exhaustMap())
    • observable pipe(switchMap())
    • concat Observables
    • combineLatest(obs1$,obs2$)
    • startWith
    • withLatestFrom(obs2$)
    • forkjoin(obs1$,obs2$,..)
    • throttle and throttleTime
    • debounceTime
    • throttleTime vs debounceTime
    • delay und delayWhen()
    • toArray()
    • Custom Operators from ngRx
  • Observable von einer Eventquelle (clicks, tastatur)
  • Error Handling
    • catchError()
    • finalize()
    • retry()

• Unittesting mit marble

• Angular Unit Tesing

  • spec - file
  • nur einige Tests ausführen
  • Objekte teilweise vergleichen
  • Testbed:
  • Router testing
    • Router in Testbed durch Stub ersetzten:
    • RouterOutlet oder andere Directives prüfen
    • RouterLink finden
  • EventEmitters
  • Test einfache Observables
  • Testing innerhalb des "subscribe()" eines Observables
  • Asynchrones Testen
  • testen mit manipuliertem timer / clock
  • Testing Forms
  • Spy um Services zu mocken und von Service abhängige Components zu testen
    • teste unscharf mit jasmine.any und workaround fuer overloaded functions mit spy:
    • spy on properties:
    • see also
  • Testen von Services selbst
  • echter Testserver:
  • Test mit Dep-Injection und ngOnInit()
  • Finding HTML-Elements in DOM
    • mit querySelector (ist aber Browserspezifisch)
    • mit debugElement (besser für Unittests) ...
      • und query(By...)
  • benutze "nativeElement" wenn ein debugElement gefunden wurde.
    • ... und query(By.directive())
  • Directive - Objekte von debugElement abfragen
  • test trigger events
  • Code Coverage
  • async, await and Promise
  • testing Promises

• Integration tests cypress

• Typescript Specials

  • Getter, Setter:
  • String to Number conversion:
  • String interpolation with Varables:
  • Array find
  • JSON ist gleichzeitig gültiges TypeScript- Objekt
  • filtering arrays (plain JavaScipt)
  • Javascript spread operator / 3 dots operator
  • Event von HTML-Elementen type-sicher verarbeiten:
  • funktional programming
    • reduce for arrays
  • getting a boolean from any type by double negating it
  • Brower localstorage
  • constructor vs inline declaration of member variables
  • import as:
  • interface vs type
  • Index Signatures

• VSCode support für Angular

  • Extension: Angular Language Service
  • Extension: Auto Import
  • Extension: VisualStudio IntelliCode
  • VSCode für Angular npm-scrips-tab anpassen
  • Karma Debug direkt in VSCode:
  • Angular debug direkt in VSCode:
  • Log Messages for Breakpoints