Frontend Web Development with Angular CC BY-NC-ND Carrot & - - PowerPoint PPT Presentation

CC BY-NC-ND Carrot & Company GmbH

Frontend Web Development with Angular

CC BY-NC-ND Carrot & Company GmbH

Agenda

• Questions
• Some infos
• Lecturing

○ Router ○ NgModules

• Todos

CC BY-NC-ND Carrot & Company GmbH

Questions?

CC BY-NC-ND Carrot & Company GmbH

• Code comments from us were made for improving your code. If you ignore

them you might lose points in the next sprint.

Some Infos

CC BY-NC-ND Carrot & Company GmbH

Routing & Navigation

[https://angular.io/guide/router]

CC BY-NC-ND Carrot & Company GmbH

Today's Topics

• Routes Configuration
• Router Link
• Router Outlet
• ActivatedRoute
• Relative Navigation
• Router Events
• Route Guards
• Component-less Route

CC BY-NC-ND Carrot & Company GmbH

Today's Topics

• Routing Modules
• Multiple Router Outlets
• Optional Route Parameter
• Query Parameters and Fragments
• Asynchronous Routing
• Preloading

CC BY-NC-ND Carrot & Company GmbH

Sample Application

• https://gitlab.fwda.cnc.io/fwda/router

CC BY-NC-ND Carrot & Company GmbH

Routes Configuration

Wildcard Route Redirecting Route Route with Parameter Route Data Child Routes

• first-match wins strategy
• Route data:

○ page titles, breadcrumb text, and other read-only, static data

CC BY-NC-ND Carrot & Company GmbH

Routes Configuration

Routes Config Print navigation lifecycle to console

RouterModule.forRoot method is a pattern used to register application-wide providers

CC BY-NC-ND Carrot & Company GmbH

Router Link & Router Outlet

<a routerLink="/user/bob">link to user component</a> <a [routerLink]="[‘/user’, ‘bob’]">link to user component</a>

• Router Outlet acts as a placeholder

CC BY-NC-ND Carrot & Company GmbH

ActivatedRoute

import { ActivatedRoute } from '@angular/router'; ... constructor(private activatedRoute: ActivatedRoute) { }

Important: convert param to number with ‘+’

Unsubscribe from this observable? The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

CC BY-NC-ND Carrot & Company GmbH

ActivatedRoute

• Observable paramMap and component reuse

○ The router re-uses a component instance when it re-navigates to the same component type without visiting a different component first ○ The route parameters could change each time ○ Eg: ■ A parent component navigation bar had "forward" and "back" buttons that scrolled through the list of persons. Each click navigated to the detail component of a person with the next or previous id. ○ Alternative: ■ Use a snapshot ■ let id = this.activatedRoute.snapshot.paramMap.get('id'); https://angular.io/guide/router#parammap-api

CC BY-NC-ND Carrot & Company GmbH

Relative Navigation

Current route: localhost:5555/user/1/details <a [routerLink]=" ...">link to user component</a> [‘../’] localhost:5555/user/1 [‘../../’] localhost:5555/user [‘../admin’] localhost:5555/user/1/admin [‘./admin’] localhost:5555/user/1/details/admin [‘/admin’] localhost:5555/admin directory-like syntax:

CC BY-NC-ND Carrot & Company GmbH

Relative Navigation

import { Router, ActivatedRoute } from '@angular/router'; ... constructor(private router: Router, private activatedRoute: ActivatedRoute){ } ...

CC BY-NC-ND Carrot & Company GmbH

Router Events

https://angular.io/guide/router#router-events

CC BY-NC-ND Carrot & Company GmbH

Route Guards

• The user is not authorized to navigate to the target component
• The user must login first
• Fetch some data before you display the target component
• Save pending changes before leaving a component
• Ask the user if it's OK to discard pending changes rather than save them

CanActivate, CanActivateChild Resolve CanDeactivate

CC BY-NC-ND Carrot & Company GmbH

Route Guards

• Multiple guards at every level of a routing hierarchy
• The router checks the CanDeactivate and CanActivateChild guards first, from

the deepest child route to the top

• Then it checks the CanActivate guards from the top down to the deepest child

route

• Return value of a guard controls the routing behavior

○ True ■ Navigation process continues ○ False ■ Navigation process stops and the user stays put ■ Pending guards that have not completed will be canceled, and the entire navigation is canceled

CC BY-NC-ND Carrot & Company GmbH

Route Guards

CC BY-NC-ND Carrot & Company GmbH

Route Guards

CC BY-NC-ND Carrot & Company GmbH

Route Guards

CanDeactivate CanActivate

CC BY-NC-ND Carrot & Company GmbH

Route Guards

CanActivateChild Resolve

CC BY-NC-ND Carrot & Company GmbH

Route Guards

• The guard can also cancel the navigation and tell router to navigate elsewhere
• Requires an Observable to complete, meaning it has emitted all of its values

Note: The observable provided to the Router must also complete. If the

• bservable does not complete, the navigation will not continue.

http://rxmarbles.com/#first

CC BY-NC-ND Carrot & Company GmbH

Route Guards

• Guards and the service providers they require must be provided at the

module-level

○ Router can retrieve these services from the injector during the navigation process ○ Same rule applies for feature modules loaded asynchronously @Injectable() export class PermissionGuard implements CanActivate { constructor(private personService: PersonService) { } … } @NgModule({ declarations: [...], imports: [...], providers: [ PersonService, ... ], bootstrap: [...] }) export class AppModule {}

CC BY-NC-ND Carrot & Company GmbH

Component-less Route

• Grouping routes
• Makes it easier to guard child routes

CC BY-NC-ND Carrot & Company GmbH

Routing Modules

• Separates routing concerns from other application concerns
• Provides a module to replace or remove when testing the application
• Provides a well-known location for routing service providers including guards

and resolvers

• Does not declare components!

CC BY-NC-ND Carrot & Company GmbH

Routing Modules

Order!

By re-exporting the RouterModule here the components declared in AppModule will have access to router directives such as RouterLink and RouterOutlet.

CC BY-NC-ND Carrot & Company GmbH

Routing Modules really necessary?

Advice from the Angular Team: Choose one pattern or the other and follow that pattern consistently.

CC BY-NC-ND Carrot & Company GmbH

Multiple Router Outlets

• The router only supports one primary unnamed outlet per template
• A template can also have any number of named outlets
• Each named outlet has its own set of routes with their own components
• Multiple outlets can be displaying different content, determined by different

routes, all at the same time

• Named outlets are the targets of secondary routes
• Eg: Pop-Up

CC BY-NC-ND Carrot & Company GmbH

Multiple Router Outlets & Secondary Routes

Secondary routes look like primary routes and you can configure them the same way.

• They are independent of each other
• They work in combination with other routes

Route: http://localhost:4200/persons(popup:popup)

CC BY-NC-ND Carrot & Company GmbH

Route Parameter

Required URL Parameter (as placeholder in the route) Optional URL Parameters (matrix URL notation) Query Parameters Fragment

CC BY-NC-ND Carrot & Company GmbH

Optional Route Parameter

• Optional route parameters are not separated by "?" or "&" as they would be in

the URL query string

• Separated by semicolons ";"
• Matrix URL notation

○

• Eg. localhost:4200/persons;id=15;foo=bar

CC BY-NC-ND Carrot & Company GmbH

Query Parameters and Fragments

More information about query parameter handling and preserving of query parameter and fragments: https://angular.io/api/router/NavigationExtras

• Fragments refer to certain elements on the page identified with an id attribute

http://localhost:4200/permission-denied?errorCode=1234#permission

CC BY-NC-ND Carrot & Company GmbH

Sample Application

• https://gitlab.fwda.cnc.io/fwda/ng-modules

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

• At the moment:

○ AdminModule is loaded when the application starts ○ → Eager loading ■ Means that all modules are loaded when the app launches

• What we want:

○ AdminModule loads only when the user clicks on a link ○ → Lazy loading

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

• Load feature modules lazily, on request
• Multiple benefits

○ Load feature areas only when requested by the user ○ Speed up load time for users that only visit certain areas of the app

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

• Provided services in a lazy-loaded module are only visible to that module

○ Module-scoped

• Router lazy-loads a module → it creates a new execution context
• Context has its own injector

○ Child injector ○ Direct child of the root injector

• Providers of a lazy module and the providers of its imported modules are

added to the child injector

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

Root Injector AppModule Child Injector PersonModule Child Injector AdminModule

Router lazy-loads a module

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

• Guard lazy loaded modules with a CanLoad guard
• CanLoad guard is checked before the module is loaded

CC BY-NC-ND Carrot & Company GmbH

Lazy Loading with the Router

• CanLoad guard use case:

○ You are already protecting the AdminModule with a CanActivate guard that prevents unauthorized users from accessing the admin feature area. It will redirect the user to the login page if the user is not authorized. ○ But the router is still loading the AdminModule even if the user can't visit any of its components. ○ Ideally, you'd only load the AdminModule if the user is logged in. ○ → Use CanLoad guard

CC BY-NC-ND Carrot & Company GmbH

Routing vs Routed Modules

• Routed Modules

○ Domain feature modules whose top components are the targets of routes ○ Lazy-loaded modules ○ Don’t export anything because their components never appear in the template of another component ○ Should not be imported by any module ■ Would trigger an eager load

• Routing Modules

○ Provides routing configuration for another module ○ Separates routing concerns from its companion module

https://angular.io/guide/module-types

CC BY-NC-ND Carrot & Company GmbH

Preloading

• After each successful navigation

○ Router looks in its configuration for an unloaded module that it can preload ○ Preloading depends on preloading strategy

• Preloading strategies

○ None (Default) ○ Preload all Modules ○ Custom Preloading Strategy

Custom Preloading Strategy: https://angular.io/guide/router#custom-preloading-strategy https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb

CC BY-NC-ND Carrot & Company GmbH

Preloading

• PreloadAllModules strategy does not load feature areas protected by a

CanLoad guard

• Want to preload a module and guard against unauthorized access, drop the

CanLoad guard and use the CanActivate guard alone

CC BY-NC-ND Carrot & Company GmbH

Thank you for your attention!

Questions?

Todos

• Refactor code based on suggestions and code comments
• Finish 3nd Sprint