Angular is a popular front-end web framework for building dynamic single-page applications (SPAs). One of the essential features of Angular is its routing mechanism, which allows you to navigate between different views or components without requiring a full page reload. Angular routing is accomplished through the Angular Router module, and it helps create a seamless and smooth user experience within your application.
In this tutorial, you will learn how to create a simple multi-page application with different routes using the Angular Router module with routing.
Angular 16 Routing Example Tutorial
Steps to implement routing using the Angular Router module. And build a simple multi-page application with different routes in angular applications:
- Step 1: Create a New Angular Project
- Step 2: Create Components
- Step 3: Define Routes
- Step 4: Update AppModule
- Step 5: Create Navigation Links
- Step 6: Serve the Application
Step 1: Create a New Angular Project
Open your terminal (or command prompt) and execute the following command to install and create a new Angular project:
ng new my-new-app
This will create a new Angular project with the name “angular-routing-example.” Enter the project directory:
cd angular-routing-example
Step 2: Create Components
In this step, we’ll create two components: HomeComponent and AboutComponent, which will be used for our routing example.
ng generate component home ng generate component about
Step 3: Define Routes
Open the ‘app-routing.module.ts’ file in the ‘src/app’ directory. Here, we’ll define our routes for the HomeComponent and AboutComponent.
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: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '' } // Redirect to HomeComponent if the URL doesn't match any defined route
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Step 4: Update AppModule
Open the ‘app.module.ts’ file in the ‘src/app’ directory and import the AppRoutingModule we just created.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; // Import the AppRoutingModule
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule // Add the AppRoutingModule to the imports array
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 5: Create Navigation Links
Open the ‘app.component.html’ file in the ‘src/app’ directory and add navigation links to navigate between the HomeComponent and AboutComponent.
<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
Step 6: Serve the Application
Finally, execute the following command on cmd or terminal to serve your Angular application:
ng serve
Now, open your browser and go to http://localhost:4200. You should see your Angular app running with navigation links for the Home and About components. Clicking on these links will navigate you to the respective components.
Conclusion
That’s it! You have set up basic routing in your Angular application. Remember that this is a simple example, and Angular’s routing capabilities are vast, allowing for more complex configurations like nested routes, lazy loading, and route guards.
Recommended Angular Tutorials
