Download as PDF, PPTX
![the router doesn’t “hijack”
a[href]-clicks like uiRouter](https://image.slidesharecdn.com/angular-camp-2017-170706151234/85/Building-a-dynamic-SPA-website-with-Angular-66-320.jpg)
![enter the [href] directive](https://image.slidesharecdn.com/angular-camp-2017-170706151234/85/Building-a-dynamic-SPA-website-with-Angular-67-320.jpg)
More Related Content
Similar to Building a dynamic SPA website with Angular
Building a dynamic SPA website with Angular
- 1. Building a dynamicSPA a journey with @filipbech @IMPACTdigitaldk
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. …enough about me let’suse Angular for dynamic content
- 8. Building a dynamicSPA a journey with @filipbech @IMPACTdigitaldk
- 9. or “How touse Angular with your cms”
- 10. Let’s do likeangular 1
- 11.
- 12. need to bootstrapa component
- 14. …but we haveno root app? • multiple entrypoints
- 15. Bootstrapping multiple applications • itsa little harder to maintain state between applications (but possible) • the cms now needs to know what components are angular-components, so they can all be bootstrapped. (and their DOM-nodes if multiple of the same component)
- 17. Initial data • Weneed to feed data (settings, initial data) into some of the components (from the cms), and put content inside them.
- 19.
- 20. Because • Root-components cannothave inputs • Root-components cannot use content-projection (transclusion) https://github.com/angular/angular/issues/1858
- 21. How about a<body>- component then?
- 23.
- 24. • even thoughit works - it feels terrible and wrong! • and we need the parser at runtime • so no AOT and bad perf
- 25. We need aSPA
- 26. Single Page Application •so we can also share state between routes • animate route-changes • and much more…
- 27. Demo-time to heighten thesuspense…
- 29. It starts witha router
- 30. …thats not verydynamic
- 31. We have toomany routes with no patterns • “/“ is a frontpage • “/om/os” is a content-page • “/mejeri“ is a category-page • “/mejeri/ost“ is a sub-category-page • “/ost-i-skiver-mild-13-cheasy-200-g” is a product-page
- 32. So I talkedto the Angular team…
- 33. …let the CMS outputroute-config
- 34. Two issues withthat approach • Need to build and invalidate the bundle’s cache every time an editor makes a change • Users get stuck on the route-config they get at first load
- 35. One route torule them all
- 37.
- 38. Get the datain a resolve
- 39. PageResolve is justa class with resolve(route)-method on it
- 40. In angular 1.xwe could use templateFactory and select a template based on the api-response But we cannot do that in Angular 2+, because there is no template-parser at runtime
- 41.
- 43.
- 44. Even though allthe *ngIfs in the template are AOT compiled into something more acceptable… It still seems wrong to have it in the template!
- 45. but (for now)it works…
- 46. until you navigatearound (nothing happens)
- 47. you’re not changingthe route just its options (so: no new resolve, no new ngOnInit)
- 48. Refactoring • Listen forroute-changes and handle resolving data manually
- 50. The problem cascades •When we go from one product-detail-page to another product-detail-page… • Refactor init-logic into ngOnChanges
- 51. Then came rc4 ComponentFactoryResolveradds beauty and power to generic components…
- 52.
- 54. What components should beavailable?
- 56. We need arouteChange for animations and it would feel a lot better too
- 57.
- 60. What about Rich-text contentfrom the CMS?
- 63.
- 65. Perfect, except forlinks
- 66. the router doesn’t“hijack” a[href]-clicks like uiRouter
- 67. enter the [href]directive
- 68.
- 69.
- 70. * in realityit’s a little more complicated
- 71. Sweeeet all we everwanted
- 72. Without all theugly Flexibility real routes => getting data in resolve + animations Rich Text
- 73. Same approach forthe dynamic content spots * we add another directive so we can repeat via *ngForOf
- 74.
- 76. Add PageComponents to ngModuleentryComponents
- 77. Faster and lighter Initialparse goes from 450ms to 250ms
- 78.
- 79.
- 80. SEO, social previewsand faster perceived load-times Angular Universal is so hot right now…(in core)
- 81. Hard to wrapyour head around universal
- 82. The idea • server.moduleand a client.module • they both import the app.module • server and client module then replaces the dependencies that are different with appropriate environment-versions (eg. xhr or node-fetch, DOM or virtual-dom)
- 83. Can’t touch this(the DOM) (no direct window, querySelector, localstorage)
- 86. Maintaining state we wantto maintain state, so we don’t re-do all fetches and calculations when the client boots up
- 87. StateTransfer Service holds data +hooks for dehydrate/rehydrate via json * idea credit to the universal creators…
- 92. CACHING OF SSR can’twork with personalisation
- 93. 3 strategies at Launch atuser interaction just don’t
- 94.
- 97. We made itto nirvana
- 98. Thank you, thiswas: “building a dynamic SPA with Angular” I’m @filipbech code: https://github.com/filipbech/ng-dynamic-spa @IMPACTdigitaldk