Why I Chose My Journey to Angular

Routing(Part 2)

Episode 6

In our previous tutorial we learned fundamental concepts in Routing. In this tutorial we are going to learn Routing in depth.

Hey What is <router-outlet> ??

Is there only one <router-outlet> exists on your angular application??

A <router-outlet> directive acts as a placeholder that Angular dynamically fills based on the current router state. When the user use the application and routes to another component, then the component’s template will be displayed within the routerOutlet.

So.. I am asking you, if you want to display more than one template in a page then, how can you do that? Here our child routes come into play. When a primary routerOutlet is displaying, the child routes component template displayed in the inner component routerOutlet in the same page. So our answer is revealed, there can be more than one routerOutlet.

Ok… We have been learning about routing from previous tutorial, we know how important routing is. So how do you protect your routes. If you allow routes to access to anybody without any restriction, it won’t be a secure application. So what shall we do?

We have to guard our routes. Some of the instances where guarding route is essential are

• Only allows to authenticated and authorised user
• Remind user about unsaved changes, when they try to leave from that route.
• In a multi part component form, allow the user to navigate from one component to another if only the given data is valid.
• Fetching data before accessing a route.

Guarding interfaces can be categorised into

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

All the routing guards are service class.

CanActivate Guard

CanActivate route can be used to check any criteria that need to be true before navigate to route. For example, ensure prerequisites. It limit the access to route.

To implement canActivate Guard

1. Create canActivate service

create CanActivate guard

As in the above code snippet, CanActivate guard can be implemented by creating a service class by implementing the CanActivate interface. When implementing this interface, canActivate() will be called and required code will have written and true or false will return. It takes two parameters ActivatedRouteSnapshot which reveals the current route state which is going to be activated and RouterStateSnapshot which provides access to the entire route state. When the return value from the above method is true, the user will allow to navigate to the route else it won’t navigate to the route.

2. Adding canActivate route guard to route configuration

route configuration for canActivate route guard

When configuring a specific route where CanActivate route guard to be needed, we have to assign the create guard service to the canActivate property and also add the guard to the providers array in @NgModule in the route configured module.

CanActivateChild Guard

This route guard is same as CanActivate route guard, but it relates to child route. It limits the access to child route. It checks the criteria required for child route navigation.

CanDeactivate Guard

This route is used when navigate from a route. It checks for the unsaved changes and if any we can provide warning to save the changes.

CanLoad Guard

This route guard is used in LazyLoading. In future tutorial we will learn about this.

Route Resolvers

You are routing to a component, but there is no data displayed in the page(only static data is there) or partial page is loaded. What do you think for a while if data is loaded after your view in the empty template. “Bad user experience”. This happens due to some cause of delay due to network problems or loading of lots of data. So how can we solve this issue?

Yes, by using route resolver. This route resolver helps us to downloaded the required data for the component before routing to a particular component. This can be generally called prefetching of data.

When building a router resolver

1. we create a route resolver service

This is a typical service class but, to accommodate the route resolver it implements the Resolve interface and we define the kind of data we are going to retrieve into it.

Route resolver service class

We must define a resolve method which will take ActivatedRouteSnapshot as a parameter which contains information about currently activated route. When the route is activated it will return an observable or promise to the route. Until the completion of work by this resolver, the associated component of route will not be activated.

2. Adding route resolver to route configuration

Adding route resolver to route configuration

We add the route resolver service class to route configuration in order to let the route to get the required data before the route component is activated. We assign the resolver service to “resolve” property.

3. Read resolver data

Here as usual we read the data from the route. If there is no refetching of data we can use ActivatedRoute snapshot to read the data or ActivatedRoute data observable if the route changes without leaving the page.

Usual guard processing happens CanDeactivate → CanLoad → CanActivateChild → CanActivate → Resolve

See you in another episode!!!