AngularJS, a hugely popular framework having a variety of websites built with it, including Gmail, Youtube, Upwork & a pool of Google sites. Let us know more about the routing in angularjs, how to set up the routes and more, as front-end developers are hardly working on it to make the application more effective & result-driven.
Routing is all about changing the state of your application, loading different components depending on the URL that the user entered. Let’s see how routing can be implemented in Angular 2.
In order to use routing, we, of course, need to set it up.
Setting up the Routes:
In-app folder, I will create a new file named as ‘app.routing.ts’. In this routing file, I will configure my routes and export them in the form of a module which I can use in my app module. I have created a constant APP_ROUTES of type Routes.
|
1 2 3 4 5 6 7 8 9 10 11 |
import { ModuleWithProviders } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const APP_ROUTES: Routes = [ { path : ‘user’, component: UserComponent }, { path : ' user -detail', component: UserDetailComponent } ]; |
When I create my APP_ROUTES constant, I will then export it to be called by app component. So, I will add
|
1 |
export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES); |
Now, I will import this routing constant in app.module.ts as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@NgModule({ declarations: [ AppComponent, UserComponent, ], imports: [ BrowserModule, routing ], }) |
With this, we have added Router module with our own routes.
Now, to render the component of that URL, <router-outlet></router-outlet> should be added.
<router-outlet> tells that here is the place where you should render the component you navigated to.
So basically, <router-outlet> sets the purpose of displaying the content of the component that you navigate to.
Adding router links:
Moving towards adding navigation links, it is very simple. It takes just a second to add a [routerLink] directive in an anchor tag. [routeLink] basically allows us to pass a link to or specify a path of the configured routes in app.routing.ts.
We have UserComponent and UserDetailComponent configured in the routes. So this is how we can use the routes to add a navigation link,
|
1 |
<a [routerLink]="[‘user’]">User</a> |
This will give the link as localhost:4200/user
In case you want to add a link like a localhost:4200/user/10, then just add the segments in the routerLink
|
1 |
<a [routerLink]="[‘user’, ‘10’]">User</a> |
There is also an alternate way to trigger navigation using code.
|
1 |
<button class="btn btn-alert" (click)="onNavigate()">Go Home</button> |
|
1 2 3 4 5 6 7 |
constructor(private router: Router) { } onNavigate(){ this.router.navigate(['/']); } |
Sometimes, it might be a case where you want to pass some data to your routes, for example when accessing a user.
|
1 |
{ path : 'user/:id', component: UserComponent } |
You can just pass another segment for id in the routerLink directive.
|
1 |
<a [routerLink]="[‘user’, ‘10’]">User</a> |
Accessing route parameters:
When it comes to accessing the parameter that you have passed to the route, you need to use the ActivatedRoute object.
|
1 2 3 4 5 6 7 8 9 10 11 |
id: string; constructor(private router: Router, private activatedRouter: ActivatedRoute) { this.subscription = activatedRouter.params.subscribe( (param: any) => this.id = param['id'] ) } |
What happens here is, I am subscribing to any changes that occur in the id parameter. Whenever the id parameter in the URL changes, this function in the constructor gets called automatically.
There is one important thing to keep in mind, we are subscribing to the parameter but whenever the component gets destroyed, the subscription would kind of live on and therefore will create a memory leak. A memory leak occurs when you allocate memory and forget to free it. To prevent this, a new property of subscription is created.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Subscription } from 'rxjs/Rx' export class UserComponent implements OnDestroy { private subscription: Subscription; constructor(private router: Router, private activatedRouter: ActivatedRoute) { this.subscription = activatedRouter.params.subscribe( (param: any) => this.id = param['id'] ) } ngOnDestroy() { this.subscription.unsubscribe(); } } |
You just need to assign the subscribe() to the subscription object that we created. ngOnDestroy function to unsubscribe the subscription to just prevent any memory leaks.
Take a note that rxjs/Rx is a third party package responsible for the Observable.
So, you can access the query parameter in your template using the string interpolation like {{param}}.
This was about setting up the routes, routing parameters. I hope it would help all front-end developers. If you have any queries, you can post it in the comment section, I will be happy to answer them.
Happy Coding!
