In Angular 2,4,5 we nevigates our components through routing. Here in this tutorial I'll explain how to manage routing in Angular 2,4,5 very easily.
Because Angular Js is preferred to develop single page web applications so if you have common navigation then you can manage them through the routing in angular.
We also can manage the authenticated routing in Angular 2,4,5.
Here we will create a file called app.routing.ts inside the app directory of application.
app.routing.ts
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
<!-- These are the components which I have imported you can do it according to your need -->
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardComponent } from './dashboard/dashboard.component';
// NavComponent has been used to show the navigations on every page after login
import { NavComponent } from './nav/nav.component';
<!--- End of import components -->
// Here i have imported the guard which authenticates the user to access the route
import { AuthGuard, AdminAuthGuard } from './guards/index';
const appRoutes: Routes = [
{
path: '',
component: LoginComponent
},
{
path: 'login',
component: LoginComponent
},
{ path: 'dashboard', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: DashboardComponent
}
] },
{ path: 'managers', component: NavComponent,canActivate: [AdminAuthGuard], children : [
{
path: '',
component: ManagersComponent
}
] },
{ path: 'edit-user/:role/:id', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: EditUserComponent
}
] },
{
path: '**',
component: PageNotFoundComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
|
In app.routing.ts, AuthGuard and AdminAuthGuard are the authentication middle wares which allow access to dashboard and managers routes after login only like:
|
1
2
3
4
5
6
|
{ path: 'dashboard', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: DashboardComponent
}
] }
|
if you have NavComponent as parent component then it will be visible on every page of your application like we have used NavComponent in the below routes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{ path: 'dashboard', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: DashboardComponent
}
] },
{ path: 'managers', component: NavComponent,canActivate: [AdminAuthGuard], children : [
{
path: '',
component: ManagersComponent
}
] },
{ path: 'edit-user/:role/:id', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: EditUserComponent
}
] }
|
You also can pass the dynamic parameters in Angular 2,4,5 routing like in below code:
|
1
2
3
4
5
6
|
{ path: 'edit-user/:role/:id', component: NavComponent,canActivate: [AuthGuard], children : [
{
path: '',
component: EditUserComponent
}
] }
|
If you wanted to manage 404 page in Angular 2,4,5 the you cab do it like below.
|
1
2
3
4
|
{
path: '**',
component: PageNotFoundComponent
}
|
Now in app.module.ts file import this routing file and add routing in imports like:
|
1
|
import { routing } from './app.routing';
|
|
1
2
3
4
|
imports: [
BrowserModule,
routing
],
|
Now in app.component.html replace the whole code with the following below code:
|
1
|
<router-outlet></router-outlet>
|
More from my site
-
Angular 2 Interceptors | ng2-interceptors
-
Upload file in Angular 2
-
How to push objects into array in Angular 2 | How to iterate objects in Angular 2 Component
-
Handling 404 with Angular 2 | How to handle 404 (page not found) page in Angular 2,4,5
-
Export data to CSV with headers in Angular 2
-
iOS Push Notifications in PHP