Steps to create an Angular app
Step 1: Set Up Angular CLI
npm install -g @angular/cli
Step 2: Create a New Angular Project
Once Angular CLI is installed, you can create a new Angular project using the ng new command:
ng new <-foldername->
Navigate into the newly created project directory:
cd <-folder-name->
Project 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/router": "^17.3.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Step 3: Generate Components for Routing
Generate components for demonstration purposes. For example, let’s create four components named home and about:
ng generate component navbar
ng generate component home
ng generate component about
ng generate component user
Step 4: Add there following codes in the required files.
<!-- // app.component.html -->
<app-navbar></app-navbar>
<router-outlet></router-outlet>
<!-- Navbar.component.html -->
<nav>
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/user">User</a></li>
</ul>
</nav>
<style>
nav {
background-color: rgb(129, 236, 125);
padding: 6px;
}
li {
display: inline;
align-items: center;
margin: 12px;
}
</style>
<!-- home.component.html -->
<p>home works!</p>
<p>Angular router project overview</p>
<style>
p {
background-color: white;
border: 1px solid #777;
padding: 5px;
}
</style>
<!-- about.component.html -->
<p>about works! the Project all about routing in Angular</p>
<style>
p {
background-color: white;
border: 1px solid #777;
padding: 5px;
}
</style>
<!-- user.component.html -->
<p>user works!</p>
<p>Angular router project overview</p>
<style>
p {
background-color: white;
border: 1px solid #777;
padding: 5px;
}
</style>
// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: [CommonModule, RouterOutlet, NavbarComponent]
})
export class AppComponent {
title = 'routing-demo';
}
// navbar.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-navbar',
standalone: true,
imports: [RouterLink],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.css'
})
export class NavbarComponent {
}
// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
export const routes: Routes = [
{ 'path': '', component: HomeComponent },
{ 'path': 'about', component: AboutComponent },
{ 'path': 'user', component: UserComponent },
];
Step 5: Serve the Application
Navigate back to the root of your project directory and serve the application using Angular CLI:
ng serve --open
Output:
This setup provides a basic demonstration of routing in Angular. You can expand upon it by adding more components and routes as needed for your application.
What is Angular Router?
Angular Router is an important feature of the Angular framework that helps you to build rich and interactive single-page applications (SPAs) with multiple views. In this article, we’ll learn in detail about Angular Router.