In this video we will discuss setting up routing in our sample application.
The routing techniques discussed in this video can be used with Angular 2 and later versions. The same techniques will also work in Angular 4 and Angular 5.
Here are the steps in short
1. Set base href in the application host page which is index.html
2. Import the RouterModule into the application root module AppModule. The Router Module contains the Router service and Router directives such as (RouterLink, RouterLinkActive, RouterOutlet etc). So for us to be able to implement routing, we first need to import the Router Module in our AppModule.
3. Configure the application routes. To configure routes, we first need to import Routes type from ‘@angular/router’.
const appRoutes: Routes = [
{ path: ‘list’, component: ListEmployeesComponent },
{ path: ‘create’, component: CreateEmployeeComponent },
{ path: ”, redirectTo: ‘/list’, pathMatch: ‘full’ }
];
To let the router know about the routes configured above, pass “appRoutes” constant to forRoot(appRoutes) method We also have forChild() method. We will discuss the difference and when to use one over the other in our upcoming videos
RouterModule.forRoot(appRoutes)
4. Create the application menu and tie the routes to it. For this use routerLink directive. This directive tells the router where to navigate when the user clicks the link. We also use router-outlet directive. This directive specifies where you want the routed component view template to be displayed. We want our navigation menu to be always displayed, so the ideal location for it is the root component AppComponent i.e app.component.html file. When the application first loads, it loads the root AppComponent in index.html. So place the required HTML in app.component.html file.
We are using Bootstrap navbar component to create the navigation menu. We discussed Bootstrap navbar component in Part 28 of Bootstrap tutorial. The following is the link.
Text version of the video
Slides
Angular CRUD Tutorial
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
