Why I Chose My Journey to Angular
Routing
Episode 5
What do Routers do?
An angular application is a combined tree of components in which some components are reusable UI components and some represent logical parts of the application. Router state is an arrangement of application components that defines what is visible on the screen.
Setting up Routing in an Angular Application
The basic step is, we have to set up the base path which is used by the router for building Url for navigation and browsers use this to build path for downloading and linking. In our Angular application, in the index.html file we can set our base path using ‘base’ element. By default it is set to slash ‘/’, which indicates the routing and downloading files are related to application root. This is suitable for development but when it comes to deployment we have to set our base path to a sub folder in the url.
Resetting the base path can be done in two ways.
Manually resetting the base path in index.html file.
<base href=“/Burg/”>
during deployment ‘https://www.example.com/Burg/’
The other way is using the Angular CLI
ng build — base-href/Burg/
After set up the base path, we have to import the router module. We can import the router module from ‘@angular/router’. We can import it to the application app module else we can import it in app-routing module and by exporting we can import that module to the app module. As like that we can add routing to the feature module.
The routes array consists of an array of route objects. Every object should have a path which will be displayed in the Url. In most of the route objects, the related component will be defined. When there are no Url segments(it will show empty path), we include the redirect property to any of the path we already specified and set pathMatch property to ‘full’ value.
Let us see the configuration of above routes for client-side navigation. There are two ways of configuring. Router module has two functions. forRoot() and forChild(). forRoot() will declare the router directives. (Example in the above image it shows that constant routes is declared and assigned to forRoot() as RouterModule.forRoot(routes)) and it manages the route configuration and register the router service. forRoot() is defined only once in an application. Normally we does this in root component and exports this to make this module accessible from other modules.
In feature modules we use the other method forChild(). It also declares the routes and manage the route configuration by creating a router module. But it does not register the router service.
When the route is activated, the associate component’s template is displayed on the outlet. The view of the template can be determined by using the router-outlet. We have to set the router-outlet directive to where we want to display out route component’s template.
How Routes do navigation?
Browser’s location bar displays the URL of the current view. A URL consists of domain name, may include port number and other parameters that need to be passed to the server.
In a non-Single-page application(non-SPA), changing any character in the proceeding URL results in a new request to the server. But in SPA you have the ability to modify the URL without letting a browser to make a server side request. By changing the URL, we can locate the proper view on the client. Angular provides two location strategies for this client-side navigation.
The router gets url from the user when he clicks a menu option, link, image or button that activates a route or updates the location bar directly after the application Url or user can click the forward or backward buttons.
For the first option we should activate the route. This can be done in the template file by adding the [routerLink] directive to a clickable element. As in other two options, the Url changes which can understand by router.
<button class=“btn btn-outline-secondary mr-3” [routerLink]=“[‘/files’]” ></button>
Here, when we click the button the activated state of the router will be activated and its associated component and template will be activated. We always have an activated route connected with the root component. That is why there is a slash(‘/’) in the link parameters array.
The same activation of route can be done by one side data binding also.
<button class=“btn btn-outline-secondary mr-3” routerLink=“/files” ></button>
We can do navigation by invoking navigate() method on Router instance which will inject into a component through its constructor.
Passing data to routes
Another use of routing is, we can pass data from component to component through routes. Through the routes we pass little bits of data called parameters like id, keywords. These parameters can be categorised into required parameters, query parameters and optional parameters.
For an instance, if we have a list of files and we want to navigate to the file detail route, then we have to pass the file ID to the component that represents the designation route. To do this, first we should add parameter to the “path” property in route configuration.
We can notice that there is a “id” placeholder in the FileDetailComponent route configuration. In this “files” is a constant segment and “id” is a variable segment that is the data we are going to pass to the route. It is denoted with “:” symbol. A route path can have more than one route parameters, in this case each placeholder should be named uniquely.
At the same time we should add this “id” placeholder to routerLink of parent component.
Extracting parameters from Activated Routes
Router extracts the router parameter passed from the parent component to the route using the ActivatedRoute service. The destination route which is instantiated with Router can inject its ActivatedRoute service to the constructor of destination route. We can access the parameters using ActivatedRoute snapshot.paramMap.get() which will provide the initial state of the route with initial value. ActivatedRoute also provides an observable called paramMap which can be subscribed to receive notification for every change in parameter.
Name of the parameter which is given in ActivatedRoute snapshot should match the route parameter in the route configuration.
Passing query parameters to a route
Route Query parameters are used in the URL by adding with question mark at the beginning and and ampersand separator as we do for normal query parameters. This query parameters are not specific to particular route. It can be used across multiple routes as it retain its value. By this it is not included in route configuration for a particular route.
Query parameters are added in the parent component template routerLink using queryParams directive and bind it to set of key and value pairs.
If you want to pass query parameters using programmatic navigation, then they should be passed through Router object navigate() in the parent component class file.
We can receive query parameters at the destination component using ActivatedRoute queryParamMap.get(). For better programming we can do the subscription as code snippet shows above.
Ok!! So we have learned about routing and some of its basic concepts. Routing plays a very crucial role in Single-page application(SPA). In my further tutorial we will discuss more on routing. See you!!
