How to make a single Page Application with Angular. From IMPACT by Angular - an event from Internet Week Denmark. Slides in Danish.

1. I M P A C TI M P A C T
SINGLE PAGE
APPLICATIONS
MED ANGULAR
1 1 . M A J 2 0 1 6

2. I M P A C T
OM MI G
• Filip Bruun Bech-Larsen
• Frontend Manager, IMPACT
• Passioneret omkring internettet
@filipbech

3. I M P A C T
HVAD ER EN SPA
• En web-applikation som passer på en webpage
med det formål at give en mere flydende bruger-
oplevelse, sammenlignelig med desktop +
mobile-apps. [wikipedia]
• I praksis i JS-router, som styrer visninger ud fra
url’er.

4. I M P A C T
HVORFOR?
• Bedre oplevelse
– Gennemført oplevelse
– Ingen ”hop”
– Animationer, spinners, etc.
– Preloade indhold
– Hurtigere side-skift (færre og mindre requests,
mindre JS-parsing)

5. I M P A C T
HVORDAN
• Simple (naiv)
– Alt up-front
• Avanceret (dynamisk)
– Alt dynamisk

6. I M P A C T
MED ANGULAR 1.X I DAG
• ui.router
• state()

7. I M P A C T
AND NOW FOR
SOME
LIVE-CODING…

8. I M P A C T
UDFORDRI NGERNE …
• Caching (invalidering)
• Memory-management
• Initial content (seo, indexering mm)
• Javascript afhængighed
• Onload (analytics, 3rd-party scripts)
• document.write

9. I M P A C T
SPØRGSMÅL???

10. I M P A C T
THANKS …
• @filipbech (slides, video mm)
• fbb@impact.dk