Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Signal-Based Data Fetching With the New httpResource ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Application Code as a Script

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run Data Binding

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 1) Signal Graph 2) Resource API 3) DEMO 4) Signal Graph in Demo 5) Live Coding Agenda

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 About Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Reactive Graph

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Building Your Reactive Graph desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Building Your Reactive Graph desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten desserts = signal([]); ratings = signal({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); 10 Building Your Reactive Graph originalName = signal(''); englishName = signal(''); Load Desserts

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Resource API

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } });

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Resource API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); dessertsCriteria = computed(() => ({ originalName: this.originalName(), englishName: this.englishName(), })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 httpResource dessertsResource = httpResource(() => ({ url: 'http://demo.angulararchitects.io/...', params: { originalName: this.originalName(), englishName: this.englishName(), } })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 DEMO

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Reactive Graph in Our App

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 canvas (view child) style levelKey animation levelResource tilesMapResource tilesResoure tilesMapProgress render (effect) levelOverview Resource

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Effect: Connecting Reactive and Imperative World

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 DEMO

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 1) Build a reactive graph 2) httpResource: fetching data within the graph 3) Service: creating httpResource Conclusion

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Marble Run

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io