9. Routing and Navigation

Angular Router

Routing Process URL Router Conﬁg Router State Instantiate components and
build component tree The router navigation is URL based

base href Add <base> element to the index.html as the
ﬁrst child in the <head> to tell the router how to compose navigation URLs. <base href="/"> (app folder is the application root)

Setting Router Conﬁg • RouterModule.forRoot(routes) - creates the router service
• RouterModule.forChild(routes) - it will load the service from the root. It only registers routes.

Router Conﬁg Example (1)

First-match wins strategy More speciﬁc routes should be placed above
less speciﬁc routes.   1. Routes with a static path. 2. Empty path route, that matches the default route. 3. The wildcard route comes last because it matches every URL.

Router directives • RouterLink  • RouterLinkActive  • RouterOutlet

RouterLink & RouterLinkActive example

Router Outlet <router-outlet></router-outlet>

Route deﬁnition with a parameter

RouterModule Providers • ActivatedRoute  • Router  https://github.com/angular/angular/blob/master/modules/ %40angular/router/src/router_module.ts

Query parameters and fragments

router.navigate 1. URL array ( + arguments) 2. Navigation Extras:
• queryParams: { 'key': value }, • fragment: 'anchor' • preserveQueryParams - Preserves the query parameters for next navigation. • preserveFragment - Preserves the fragment for next navigation • skipLocationChange - Navigates without pushing a new state into history. • replaceUrl - Navigates while replacing the current state in history.

router.navigate example

ActivatedRoute • url: An Observable of the route path(s), represented
as an array of strings for each part of the route path. • data: An Observable that contains the data object provided for the route. Also contains any resolved values from the resolve guard. • params: An Observable that contains the required and optional parameters speciﬁc to the route. • queryParams: An Observable that contains the query parameters available to all routes. • fragment: An Observable of the URL fragment available to all routes. • outlet: The name of the RouterOutlet used to render the route. For an unnamed outlet, the outlet name is primary.

ActivatedRoute example

route.snapshot • The route.snapshot provides the initial value of the
route parameters. • You can access the parameters directly without subscribing or adding observable operators

route.snapshot example

Conﬁgure Redirects • RedirectTo - route that we want to
redirect to • pathMatch Full - match the redirect route with full URL • pathMatch Preﬁx - match the redirect route when the remaining URL begins

Redirect example

Child route conﬁguration

Wildcard route • A wildcard route has a path consisting
of two asterisks. It matches every URL. The router will select this route if it can't match a route earlier in the conﬁguration. • A wildcard route can navigate to a custom "404 Not Found" component or redirect to an existing route.

Wildcard route example

Asynchronous routing (Lazy - Loading) main.bundle.js lazy.bundle.js http://localhost:4300/ http://localhost:4300/lazy main.bundle.js
is smaller => less time to download and to bootstrap

Lazy Loading Conﬁg Nothing else than the conﬁg changes in
our applications

loadChildren loadChildren tells the router to fetch the module bundle
when the user navigates to the route

Preloading Load lazy loaded modules after the main bundle is
bootstraped and the user is interacting with the app.

Preloading Strategies • PreloadNothing • PreloadAllModules https://github.com/angular/angular/blob/ 5f3c8441e49fd5d31654c0452360c7fa18d624ed/modules/%40angular/ router/src/router_preloader.ts

Custom Preloading Strategy https://github.com/angular/angular/blob/ 1f3198cb505a6bb74aadf022c7142f3f4d8cbe28/aio/content/examples/ router/ts/src/app/selective-preloading-strategy.ts

Things we should remember • When subscribing to an observable
in a component, you almost always arrange to unsubscribe when the component is destroyed. • ActivatedRoute observables are an exceptions. They are handled by the router

Questions?

9. Routing and Navigation

9. Routing and Navigation

iliya

More Decks by iliya

Featured

Transcript

Angular Router

Routing Process URL Router Conﬁg Router State Instantiate components and

base href Add <base> element to the index.html as the

Setting Router Conﬁg • RouterModule.forRoot(routes) - creates the router service

Router Conﬁg Example (1)

Router Conﬁg Example (2)

Router Conﬁg Example (3)

First-match wins strategy More speciﬁc routes should be placed above

Router directives • RouterLink  • RouterLinkActive  • RouterOutlet

RouterLink & RouterLinkActive example

Router Outlet <router-outlet></router-outlet>

Route deﬁnition with a parameter

RouterModule Providers • ActivatedRoute  • Router  https://github.com/angular/angular/blob/master/modules/ %40angular/router/src/router_module.ts

Query parameters and fragments

router.navigate 1. URL array ( + arguments) 2. Navigation Extras:

router.navigate example

ActivatedRoute • url: An Observable of the route path(s), represented

ActivatedRoute example

route.snapshot • The route.snapshot provides the initial value of the

route.snapshot example

Conﬁgure Redirects • RedirectTo - route that we want to

Redirect example

Child route conﬁguration

Wildcard route • A wildcard route has a path consisting

Wildcard route example

Asynchronous routing (Lazy - Loading) main.bundle.js lazy.bundle.js http://localhost:4300/ http://localhost:4300/lazy main.bundle.js

Lazy Loading Conﬁg Nothing else than the conﬁg changes in

loadChildren loadChildren tells the router to fetch the module bundle

Preloading Load lazy loaded modules after the main bundle is

Preloading Strategies • PreloadNothing • PreloadAllModules https://github.com/angular/angular/blob/ 5f3c8441e49fd5d31654c0452360c7fa18d624ed/modules/%40angular/ router/src/router_preloader.ts

Custom Preloading Strategy https://github.com/angular/angular/blob/ 1f3198cb505a6bb74aadf022c7142f3f4d8cbe28/aio/content/examples/ router/ts/src/app/selective-preloading-strategy.ts

Things we should remember • When subscribing to an observable

Questions?