Angular 2 routing tutorial

Text version of the video

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.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

Tags
angular 2 router html5 mode
angular 2 cannot find primary outlet to load component
angular2 routing hash
angular 2 router link active
angular 2 router tutorial
angular 2 router use hash
angular 2 router wildcard
angular 2 router with hash
angular 2 router youtube
angular 2 routing hash
angular 2 routing href

In this video we will discuss the basics of routing in Angular 2. Routing allows users to navigate from one view to another view.

At the moment, we have EmployeeListComponent in our application. Let's create another simple HomeComponent so we can see how to navigate from HomeComponent to EmployeeListComponent and vice-versa.

If the user tries to navigate to a route that does not exist, we want to route the user to PageNotFoundComponent. So let's create this component as well.

Here are the steps to implement routing in Angular 2 applications.

[base href="/src/"]

// Routes is an array of Route objects
// Each route maps a URL path to a component
// The 3rd route specifies the route to redirect to if the path
// is empty. In our case we are redirecting to /home
// The 4th route (**) is the wildcard route. This route is used
// if the requested URL doesn't match any other routes already defined
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'employees', component: EmployeeListComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

// To let the router know about the routes defined above,

// pass "appRoutes" constant to forRoot(appRoutes) method
@NgModule({
imports: [
BrowserModule, FormsModule, HttpModule,
],
declarations: [AppComponent, HomeComponent, …],
bootstrap: [AppComponent]
})
export class AppModule { }

Important: The order of the routes is very important. When matching routes, Angular router uses first-match wins strategy. So more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.

We are using Bootstrap nav component to create the menu. We discussed Bootstrap nav component in Part 27 of Bootstrap tutorial.
The routerLink directive tells the router where to navigate when the user clicks the link.
The routerLinkActive directive is used to add the active bootstrap class to the HTML navigation element whose route matches the active route.
The router-outlet directive is used to specify the location where we want the routed component's view template to be displayed.
The routerLink, routerLinkActive and router-outlet directives are provided by the RouterModule which we have imported in our application root module.
If you forget to specify the router-outlet directive, you will get and error stating - cannot find primary outlet to load component.

If you do not have the above url rewrite rule, when you referesh the page you will 404 page not found error.

[madhurajsingh]

I could not stopped myself commenting on your your teaching skill are of level

[alifarooqi]

Hi Venkat, great video. One issue: I am getting this error "cannot find module @angular/router" . I have been following every step from your first video. Any advice/tip/solution for the error? Thanks in advance

[CodingSquid]

Very nice job. It would be a better example if we eliminate /src/ from the URL. Maybe in a future lesson. Thank you Venkat!

[bmiguelmf]

The best of all time!!! Thank so much mate. keep the good work!

[prachiprava]

you are the best, the way you are explaining, its just awasmm . keep teaching like this & keep making valuable videos like this.

[FloppyDisk]

I was looking for routing tutorial just 1h before this was uploded =/

[rasagnabijjam]

Hi Venkat,
Is there a possibility to apply this routing only for 2 components without defining it in app.component directly?

[stampsworld]

I don't see slides of Angular 2 in your blogspot.

[josephregallis]

I had a problem initially trying to go to the employees page. We had added an extra s to employeess in an earlier tutorial and did not fix it so my route would not work. I finally found the problem but I ask you to please not do this in the future because it can cause us big headaches. Undo these errors before moving forward with a new tutorial.

[shailendraphadke]

How to use routerLink in .html file? I have used below code but it is not working

<div class="container">
<header class="page-header">
<ul class="nav nav-pills">
<li routerLinkActive="active"><a
<li routerLinkActive="active"><a
</ul>
</header>

<p class="jumbotron">

</p>
</div>

in app.component.ts i have mentioned templateUrl : 'index.html'

[systemsatyaki]

Please make a videos for dynamic menu using Angular2 and bootstrap css library.

[saurabhchauhan]

can we have passing multiple query string data to next component video with routing ?

[shabeerna]

Sir,
Route is case sensitive, how can we make it insensitive

[noorulhaq]

i am not using any backend, how i can remove # from url??

[nijangouda]

Hi Sir, I am very big fan of your teaching, Please could you explain How CRUD(Different page) can able to access single component. In angular 1, I used to mention ng-controller but in angular I am not able to do that one, plzzz sir

[raghuramogirala]

i have created project using angular CLI, there is no web.config generated using it. Can anyone help me how to get that file?

[shivangijain]

hey,
I like the way explain. I stuck in one place from where you create this web.config file. when i prepared a project there is no web.config file. please help ASAP.

[manalijain]

It was really helpful !!! Thanks a lot

[nikolapolov]

Great, you should make advanced tutorial on udemy .

[rashidaslam]

Sir please create video on authorization and authentication in angular 4 with auth0 or whatever the best approach is ...