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.

Angular Routes Complete Guide | How To Create Routes In Angular

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...

Node Js Angular

Robert look

Author, Web Developer (Front-end & Back-end)

My Name is Robert look from New york, America. I'm a Web Application Developer with 6 years of experience. Currently, I'm working on front-end & back-end web development using popular web technology Languages. That's why I love to share my coding knowledge in a smart way.