In this video we will discuss generating routing module using the Angular CLI.
To make Angular CLI generate a routing module, all you have to do is use –routing option along with the ng new command when generating a new Angular project.
ng new RoutingDemo –routing
In our previous video, we discussed the steps to implement routing in a separate module, and them import that routing module in the application root module AppModule. Here are those steps.
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. Optionally, use the routerLinkActive directive to style the current route that is active, so the user knows the page that he is on, in the application.
Out of the above 7 steps, we only need to implement steps 4 & 7. The rest of the steps are implemented by the Angular CLI out of the box. Just imagine the amount of time we save.
Before we can implement steps 4 & 7. Let’s generate the following 3 components.
Component Angular CLI Command
HomeComponent ng g c home
EmployeesComponent ng g c employees
PageNotFoundComponent ng g c pageNotFound
Now let’s implement Step 4. In app-routing.module.ts file specify the application routes. Copy and paste the following code. In addition to the routes, notice we are also importing HomeComponent, EmployeesComponent & PageNotFoundComponent as we are referencing these components in the route configuration.
import { HomeComponent } from ‘./home/home.component’;
import { EmployeesComponent } from ‘./employees/employees.component’;
import { PageNotFoundComponent } from ‘./page-not-found/page-not-found.component’;
const routes: Routes = [
{ path: ‘home’, component: HomeComponent },
{ path: ’employees’, component: EmployeesComponent },
{ path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ },
{ path: ‘**’, component: PageNotFoundComponent }
];
Now let’s implement Step 4. In app.component.html copy and paste the HTML code from my blog
Finally we need to install and reference Bootstrap, to style the navigation menu. To install bootstrap execute the following npm command. We can execute this command in the command prompt window or in the integrated terminal window in Visual Studio Code.
npm install bootstrap@3 –save
Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below.
“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”
]
At this point stop the server. Build and run the application again using the following Angular CLI command. Routing should be working as expected.
ng serve –open
Text version of the video
Slides
Angular CLI Tutorial
Angular CLI Text articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic