Скачать или смотреть Implementing routing in separate module in angular

In this video we will discuss, implementing routing in a separate routing module.

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  

At the moment, all the routing code is implemented in the root AppModule. However, for separation of concerns and maintainability, it is better to implement routing in a separate module and then import that routing module in the AppModule. If routing is in it's own module, it is easier to find and change routing code if required.

Moving routing code into it's own module is easy and straight forward.
Step 1 : Create a new file in the 'app' folder. Name it app-routing.module.ts

Step 2 : Copy and paste the following code in it. The code is commented and self-explanatory.

// Import NgModule decorator to decorate AppRoutingModule class
import { NgModule } from '@angular/core';
// Import RouterModule and Routes type from angular router library
import { RouterModule, Routes } from '@angular/router';

// Import the following 3 components as we will reference
// them in the route definitions below
import { HomeComponent } from './home/home.component';
import { EmployeesComponent } from './employees/employees.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

// Configure the routes. The Routes type and the
// referenced components are imported above
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'employees', component: EmployeesComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

// The NgModule decorator is imported above
// Pass the configured routes to the forRoot() method
// to let the angular router know about our routes
// Export the imported RouterModule so it is available
// to the module that imports this AppRoutingModule
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
})
export class AppRoutingModule { }

Step 3 : Modify the code in the root AppModule in app.module.ts. The code is commented and self-explanatory.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { EmployeesComponent } from './employees/employees.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
declarations: [
AppComponent,
HomeComponent,
EmployeesComponent,
PageNotFoundComponent
],
// Import AppRoutingModule which contains our routing code
// AppRoutingModule has also exported angular RouterModule, so
// all the RouterModule features are also availble to this module
// including the router-outlet directive used in the AppComponent
// If AppRoutingModule module did not export RouterModule we get
// 'router-outlet' is not a known element error
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Save all changes and run the project using the following command
ng serve --open

Notice routing in our angular application works exactly the same way as before. We now have routing implemented in it's own module.

To quickly recap, here are the steps to implement routing in a separate module.

Step 1 : Set base href in index.html.

Step 2 : Create a separate routing module file. You can name it anything you want. I named it app-routing.module.ts.

Step 3 : Import the angular RouterModule into your application routing module (app-routing.module.ts). Also don't forget to re-export RouterModule.

Step 4 : Configure the application routes.

Step 5 : Import the application routing module (app-routing.module.ts) in the root AppModule.

Step 6 : Specify where you want the routed component view template to be displayed using the router-outlet directive

Step 7 : Create a navigation menu and tie the configured routes with the menu using the routerLink directive.

Text version of the video
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CLI Tutorial
   • What is Angular CLI  

Angular CLI Text articles & 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