Creating a Seamless Single-Page Application with Angular Routing

In this blog, we'll take you through the process of creating a simple blog project, providing step-by-step instructions to help you understand and implement Angular routing effectively.

Why Angular Routing Matters
Setting Up Your Angular Project
Creating Components
Configuring Routes
Updating App Module and Component
Styling Your Application
Serving and Testing Your Application:

What is Angular routing?

Angular routing is a powerful feature that allows you to build single-page applications (SPAs) by enabling navigation between different views or components within your Angular application without requiring a full page reload. Instead of traditional server-side navigation, where each link or action results in a new HTTP request and a completely new page, Angular routing provides a seamless and dynamic user experience within the same page.

Routing plays a crucial role in web development, particularly in the context of single-page applications (SPAs) and modern web frameworks

Single-Page Application (SPA) Navigation

In SPAs, the application runs within a single HTML page, and routing allows users to navigate between different views or sections of the application without the need for a full page reload. This results in a smoother, more responsive user experience.

Dynamic Content Loading

Routing enables dynamic content loading by allowing components or views to be loaded asynchronously as needed. This is particularly important for large applications with many components, as it helps in optimizing the initial page load time.

Improved User Experience

Routing contributes to a more seamless and enjoyable user experience. Users can move between different sections of the application with smooth transitions, making the application feel more like a traditional desktop application.

Modular Application Structure

Routing encourages a modular structure in the application. Each route can be associated with a specific component or feature, leading to a more organized and maintainable codebase.

Let's create a simple blog project to understand routing in Angular.

Step 1. Create a New Angular Project

 ng new my-blog

Follow the prompts to set up your project. You can choose options like stylesheets format (CSS, SCSS, etc.) and whether you want Angular routing or not.

Step 2. Navigate to the Project Directory

cd my-blog

For Example path. D:\CSharpCorner\Project\Angular which contain Project my-blog we need to navigate into the Folder by using cd command in Terminal.

cd D:\CSharpCorner\Project\Angular\my-blog.

Step 3. Create Components

ng generate component home
ng generate component about
ng generate component Services
ng generate component Blog

Step 4. Set Up Routes

Open the src/app/app-routing.module.ts file, which Angular CLI generates if you choose routing during project creation. Configure your routes in this file.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
import { BlogComponent } from './blog/blog.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'services', component: ServicesComponent },
  { path: 'blog', component: BlogComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 5. Update App Module

Open src/app/app.module.ts and make sure to import and include the AppRoutingModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
import { BlogComponent } from './blog/blog.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ServicesComponent,
    BlogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6. Update App Component HTML

Update src/app/app.component.html to include the <router-outlet> directive.

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

<header>
  <nav>
    <ul>
      <li><a routerLink="/" routerLinkActive="active">Home</a></li>
      <li><a routerLink="/about" routerLinkActive="active">About</a></li>
      <li><a routerLink="/services" routerLinkActive="active">Services</a></li>
      <li><a routerLink="/blog" routerLinkActive="active">Blog</a></li> 
    </ul>
  </nav>
</header>

<main>
  <!-- Your router-outlet or other content goes here -->
  <router-outlet></router-outlet>
</main>

Step 7. Update App Component CSS

Update src/app/app.component.css file.

/* styles.scss */

/* Reset some default margin and padding for the page */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

/* Apply a basic style to the header */
header {
  background-color: #333;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Style the logo */
.logo img {
  height: 40px; /* Adjust the height as needed */
}

/* Style the navigation menu */
nav ul {
  list-style: none;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
}

nav ul li a:hover {
  color: #ffcc00; /* Change to your desired hover color */
}

/* Apply some spacing for the main content */
main {
  padding: 20px;
}

Step 8. Serve the Application

Run the application using the following command.

ng serve -o

You should see your basic Angular app with routing in action.

Step 9. Test Navigation

Click on the "Home" and "About" links to see the content of the corresponding components being displayed without full page reloads.

Summary

Angular routing enhances user experience in SPAs by enabling seamless navigation.Routing allows for dynamic content loading, optimizing performance.A modular application structure is encouraged through the association of routes with specific components.

The provided steps demonstrate the creation of a simple blog project with Angular routing.

If you encounter any issues or have further questions, feel free to let me know, and I'll be glad to assist.

Thank you for reading, and I hope this post has helped provide you with a better understanding of Routing in Angular.

"Keep coding, keep innovating, and keep pushing the boundaries of what's possible.

Happy Coding.