An overview of Routing in Angular

Posted By : Prachi Ahuja | 29-Jul-2019
Angular router is maintained and built by Angular team which can be easily installed from a @angular/router package. This package provides a routing library with the help of which we can easily access route parameters and route guards for the protection of components from any unauthorised access.
Angular router allows the developer to build single page applications with multiple different views in that same application. The core feature of routing is to enable navigation among different components in an application.
Route Params-
In angular creation of routes with parameters is a very common feature and it allows to access parameters in different ways-
- Activated Route Service
- ParamMap Observable
Here is an example of route using id parameter-
             { path:  'contacts/:id', component:  ContactDetailComponent}   
Route Guards-
Route Guard is one of the best features of Angular routing with which developers can add logic and on the basis of that logic developer can allow or deny the access of any page to the user.
Router Outlet-
This is a directive from router library which is used as a component. It marks the place in the template where the router displays its components.
We can add multiple outlets in our application which helps in adding advanced routing scenarios.
{ path:  'contacts', component:  ContactListComponent}
Angular Routing supports multiple routing outlets in a single application.
- The primary outlet is an outlet with no name.
- All other outlets should have a name.
Routing Implementation-
- We first need to set imports in the application -
       import {Routes, RouterModule} from "@angular/router";   
- Mapping of URL with the components -
              const routes: Routes = [
               { path: '', component: HomeComponent },
               { path: 'search', component: SearchComponent }
- Installation of routes in an application - 
	imports: [
	RouterModule.forRoot(routes, {useHash: true})
This is a quick and brief overview of Angular Routing and thanks for reading this blog.

About Author

Author Image
Prachi Ahuja

Prachi is a UI Developer having knowledge of HTML5, CSS3, Javascript, Jquery. She is dedicated towards her work.Her hobbies are drawings/paintings and writing articles.

Request for Proposal

Name is required

Comment is required

Sending message..