No content

Angular Router

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

base href Add element to the index.html as the first child in the to tell the router how to compose navigation URLs. (app folder is the application root)

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

Router Config Example (1)

Router Config Example (2)

Router Config Example (3)

First-match wins strategy More specific routes should be placed above less specific 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

Route definition 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 specific 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

Configure Redirects • RedirectTo - route that we want to redirect to • pathMatch Full - match the redirect route with full URL • pathMatch Prefix - match the redirect route when the remaining URL begins

Redirect example

Child route configuration

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 configuration. • 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 Config Nothing else than the config 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?