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

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

Some Infos ● Code comments from us were made for improving your code. If you ignore them you might lose points in the next sprint. 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 Route Data Child Routes Route with Parameter Redirecting Route Wildcard Route 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 Print navigation Routes Config 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 ● Router Outlet acts as a placeholder <a routerLink="/user/bob">link to user component</a> <a [routerLink]="[‘/user’, ‘bob’]">link to user component</a> 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> directory-like syntax: [‘../’] localhost:5555/user/1 [‘../../’] localhost:5555/user [‘../admin’] localhost:5555/user/1/admin [‘./admin’] localhost:5555/user/1/details/admin [‘/admin’] localhost:5555/admin 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 CanActivate, CanActivateChild ● Fetch some data before you display the target component Resolve Save pending changes before leaving a component ● CanDeactivate ● Ask the user if it's OK to discard pending changes rather than save them 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 CanActivate CanDeactivate 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 observable 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 ○ @NgModule({ declarations: [...], imports: [...], @Injectable() providers: [ export class PermissionGuard implements CanActivate { PersonService, ... constructor(private personService: 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 Optional URL Query Parameters Fragment Parameter Parameters (as placeholder (matrix URL in the route) notation) 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 ● Fragments refer to certain elements on the page identified with an id attribute http://localhost:4200/permission-denied?errorCode=1234#permission More information about query parameter handling and preserving of query parameter and fragments: https://angular.io/api/router/NavigationExtras 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