Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Component Router (serbian)

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.

B5a5aa65ece7b78c2b73afca48c48885?s=128

Miroslav Jonaš

April 21, 2021
Tweet

More Decks by Miroslav Jonaš

Other Decks in Programming

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