Angular 2 routing tutorial
Text version of the video
http://csharp-video-tutorials.blogspo...
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.
/ @aarvikitchen5572
Slides
http://csharp-video-tutorials.blogspo...
Angular 2 Tutorial playlist
• Angular 2 tutorial for beginners
Angular 2 Text articles and slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic
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.
Step 1 : Set [base href] in the application host page which is index.html. The [base href] tells the angular router how to compose navigation URLs.
[base href="/src/"]
Step 2 : In our angular application root module (app.module.ts), import RouterModule and Routes array and define routes as shown below.
import { RouterModule, Routes } from '@angular/router';
// 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,
RouterModule.forRoot(appRoutes)
],
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.
Step 3 : Tie the routes to application menu. Modify the root component (app.component.ts) as shown below. The only change we made is in the inline template.
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.
Step 4 : Finally in web.config file of our angular application include url-rewrite rule to tell IIS how to handle routes.
If you do not have the above url rewrite rule, when you referesh the page you will 404 page not found error.
To use "hash style" urls instead of HTML5 style url's, you just need to make one change in app.module.ts file. Set useHash property to true and pass it to the forRoot() method as shown below.
RouterModule.forRoot(appRoutes, { useHash: true })
Смотрите видео Angular 2 routing tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь kudvenkat 15 Август 2017, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 129,935 раз и оно понравилось 420 людям.