Angular Component Router (serbian)

Možda ste čuli glasine o novom ruteru za Angular, možda i videli Brendonovu prezentaciju sa prošlogodišnje ngConf.

Bili smo vrlo zauzeti tokom locakdown-a i želim da Vam predstavim zašto je ovaj router baš ono što čekate i šta nedostaje Vašem projektu. Pridružite mi se na prezentaciji i saznajte koje to benefite donosi novi ruter.

Transcript

1. @angular-component Router Miroslav Jonaš @meeroslav
2. Nije lako biti Angular dev
3. “Ne pitajte šta Angular može učiniti za vas, već šta vi možete učiniti za Angular” @meeroslav Džon F. Kenedi
4. Zdravo! Miroslav Jonaš @meeroslav
5. Istorija angular rutera angular ui-router @angular/router @ngrx/router react-router @angular-component/router 2010 2013 2014 2016 2017 2020 angular-route ng v2 v4 v11 @meeroslav
6. Brendon Roberts @meeroslav
7. Kratka istorija angular-component/router-a PRVI COMMIT 23. jun PRVI TWEET 2. jul PRVI PR 13. jul @meeroslav
8. 8 @meeroslav
9. @meeroslav
10. <!-- neki html pre --> <router> <route path="/blog" [exact]="false"> <app-blog *routeComponent></app-blog> </route> <route path="/posts/:postId"> <app-post *routeComponent></app-post> </route> <route path="/about"> <app-about *routeComponent></app-about> </route> <route path="/" redirectTo="/blog"></route> <route path="/" [exact]="false"> <app-page-not-found *routeComponent></app-page-not-found> </route> </router> <!-- neki html posle --> @meeroslav
11. <!-- neki html pre --> <router> <route path="/blog" [exact]="false"> <app-blog *routeComponent></app-blog> </route> <route path="/posts/:postId"> <app-post *routeComponent></app-post> </route> <route [path]="aboutPath$ | async"> <app-about *routeComponent [user]="me"></app-about> </route> <route path="/" redirectTo="/blog"></route> <route path="/" [exact]="false"> <app-page-not-found *routeComponent></app-page-not-found> </route> </router> <!-- neki html posle --> @meeroslav
12. @meeroslav
13. 671kB Cela biblioteka 0 Zavisnih biblioteka 6kB Min + gzip bundle * VELIČINA JE BITNA! @meeroslav < 3.17 MB < 23 kB
14. GUARDS? NE, NGIF! <router> <route path="/admin" *ngIf="user.isAuthenticated$ | async"> <app-admin *routeComponent></app-admin> </route> </router> @meeroslav
15. POGREŠAN POREDAK PUTANJA @meeroslav
16. Tamo gde idemo NE POSTOJI POGREŠAN POREDAK PUTANJA @meeroslav <router> <route path="/" [exact]="false"> <app-page-not-found *routeComponent></app-page-not-found> </route> <route path="/" redirectTo="/blog"></route> <route path="/blog" [exact]="false"> <app-blog *routeComponent></app-blog> </route> </router>
17. RESPONSIVE ROUTING ROUTER R O U T E R @meeroslav
18. REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE REKURZIVNE RUTE @meeroslav
19. ČEK… JEL TO ZAMENA? Ne, nadogradnja! @meeroslav
20. SADA? Zavisi... @meeroslav
21. AKO VAM TREBAJU... › Redirekcije › Ugnježdene rute › Lenje učitavanje › Ograničavanje pristupa › Parametri putanje kao Observable › Sporedni ruteri @meeroslav
22. IPAK... AKO VAM TREBA: › Kompleksna guards arhitektura › Svi parametri dostupni svuda › Neka druga config/event magija @meeroslav
23. @meeroslav “Korak po korak” pristup
24. HVALA! Pitanja? @meeroslav https://github.com/angular-component/router https://recursive-ng-router.netlify.app/ https://responsive-ng-router.netlify.app/ https://www.buymeacoffee.com/meeroslav › Presentation template by SlidesCarnival