Steps to create Angular application

Step 1: Create the angular project using the following command.

ng new project

Folder Structure:

Dependencies:

"dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@angular/ssr": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
},
"devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
}

Now let us learn how to create routes for our application

Step 2: Let us create home and about components

ng g component home
ng g component about

Step 3: Implement the Code

HTML

<!-- app.component.html -->

<h1>Angular Router Example</h1>
<nav>
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
</nav>
<router-outlet></router-outlet>

HTML

<!-- home.component.html -->

<p>home works!</p>

HTML

<!-- about.component.html -->

<p>about works!</p>

JavaScript

// app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    constructor(private router: Router) { }

    navigateToHome() {
        this.router.navigate(['/home']);
    }

    navigateToAbout() {
        this.router.navigate(['/about']);
    }
}

JavaScript

//app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

To start the application run the following command.

ng serve

Output:

How do you configure routes in Angular?

In Angular, configuring routes is an important part of building single-page applications (SPAs) and managing navigation between different components. By defining routes, we can map URLs to specific components, enabling users to access different views within our application.

This enhances user experience by providing a seamless and dynamic interaction. Configuring routes correctly is important for building a robust and user-friendly application. In this article, let us discuss the process of configuring routes in Angular and explore different approaches to achieve this.

Table of Content

Using Basic Routing
Using Advanced Routing Features

Tags:

#AngularJS-Basics #AngularJS #Web Technologies

Using Advanced Routing Features

Steps to create Angular application

How do you configure routes in Angular?

Similar Reads

Contact Us