Angular routing and navigation

In this video we will discuss setting up routing in our sample application.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

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.
https://www.youtube.com/watch?v=KRsSSpMaaKg&list=PL6n9fhu94yhXd4xnk-j5FGhHjUv1LsF0V&index=28

Text version of the video
http://csharp-video-tutorials.blogspot.com/2017/12/angular-routing-and-navigation.html

Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-routing-and-navigation-slides.html

Angular CRUD Tutorial
https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_

Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists