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.
<router-outlet></router-outlet>
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 -
@NgModule({
imports: [
.
.
RouterModule.forRoot(routes, {useHash: true})
]
})
This is a quick and brief overview of Angular Routing and thanks for reading this blog.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.