Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 cakes = signal(['Sacher Cake', 'Pancake', 'Ice Cream Pancake']); selected = signal(2); selectedCake = computed(() => this.cakes()[this.selected()]); cakeResource = createCakeResource(this.selectedCake); details = this.cakeResource.value; error = this.cakeResource.error; A Simple First Example …
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Angular Dev Tools (Preview)
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Unidirectional Data Flow Component Store "Intention" Signal sync/ async computed() computed()
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 How to Establish an End2End Data Flow in Angular using Signals & Stores?
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 How to Establish Full Cycle Reactivity?
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Full Cycle Reactivity in Angular Backend Store Component Resource ? Mutation ? Forms ?
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Example
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Modern Building-Blocks withResource Resource API Signal Forms withMutations Ships with Angular, experimental Ships with the ngrx-toolkit, candidate for SignalStore Shipped with Angular, experimental Ships with the ngrx-toolkit NgRx SignalStore Part of the NgRx Family
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 2nd Edition angularArchitects.io/modern eBook: Modern Angular
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 1) Think in terms of data flows 2) Use a store to streamline the data flow 3) Reactive helpers and APIs: Resource API, Mutation API, Signal Forms Conclusion
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples