Angular Routes Complete Guide | How To Create Routes In Angular
Step By Step tutorial to create a routing angular for your root component, add a second component using ng generate routing module.
In this tutorial, we learn Angular CLI is a command-line interface tool that can create a project, For Single Page Application, Routing is the one and only tool or we can say module to navigate the pages to pages in routing angular. So, let us get started with angular routes or just angular router Tutorials.
Step 1: Install The Angular Project.
Install Angular CLI globally on your system by typing the following command.
npm install -g @angular/cli
Now, create one project called myfirstproject
ng new myfirstproject
Step 2: Make three components for the application.
Create one directory inside src>app folder called components.
Next, make three components by typing the following command How to create components.
ng g c home ng g c about ng g c dashboard
It creates a separate folder inside src>app directory, we need to move all these three folders inside the components folder for better project structure angular routes.
So, our app.module.ts file looks like this.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
DashboardComponent
],
imports: [
BrowserModule, RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 3: Routing and Navigation.
The Angular Router enables navigation from one view to the next as users perform application tasks routing module.
First, for angular routes, we need to import the routing modules inside our app.module.ts file.
// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
BrowserModule, RouterModule
],
Configuration
When you have created the components, its default path is different and now we have moved the components in the angular router, so now its path is different. So, first, we need to change that path in the app.module.ts file.
// app.module.ts
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
Okay, now we need to configure the routes. So make one file inside the app directory called App-Routing.Module.ts to file this routing module.
Write the following code in it.
// App-Routing.Module.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'dashboard', component: DashboardComponent }
];
export default appRoutes;
Step 4: Define the Router outlet.
In the app.component.html file, write the following code.
<!-- app.component.html -->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</div>
Now, we have already changed the title inside the app.component.ts file.
// app.component.ts title = 'Welcome to PHPcodingstuff.com';
Start the app by the following command.
ng serve --open
After your angular router project compiles successfully, we can see the following page at the localhost
I hope it can help you...
Leave a Reply