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);
|
...