Activity 9 Angular Basic Routing

In this post, I will walk you through how I created a simple Angular project with basic routing, how to navigate between the multiple components using Angular routing that includes four main components which is the Login, Signup, Homepage, and Landing Page

1. Project Setup

First, I set up a new Angular project using Angular CLI/CMD and created four components the Login, Signup, Homepage, and Landing Page

Commands

ng new AngularBasicRouting

<--After creating, navigate into your project directory-->
cd AngularBasicRouting

<--Then generate four components-->
ng generate component login
ng generate component signup
ng generate component homepage
ng generate component landing-page

2. Setting Up Routing

And next, I configured the routing to navigate between the components. I set up the routes by creating a routing configuration file called app.routes.ts.

Here’s how I defined the routes for each component in the project:

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { HomepageComponent } from './homepage/homepage.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

// Define routes for the components
export const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'signup', component: SignupComponent },
  { path: 'homepage', component: HomepageComponent },
  { path: 'landing', component: LandingPageComponent },
  { path: '**', redirectTo: 'landing' }, // Handles unknown routes
];

3. Setting Up Main Application Bootstrap (`main.ts`)

I used the bootstrapApplication method to bootstrap the app with routing:

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
}).catch((err) => console.error(err));

4. Creating Component Templates

For each component, I created basic templates with navigation links to show the routing. Below is an example of the template for LoginComponent:

Example of `login.component.html`:

<!-- src/app/login/login.component.html -->
<h2>Login Page</h2>
<p>Welcome to the Login Page!</p>
<a routerLink="/signup">Go to Signup</a> |
<a routerLink="/homepage">Go to Homepage</a>

5. Main Application Template (`app.component.html`)

The main template features a navigation menu and a <router-outlet> where the routed components are shown

`app.component.html`:

<!-- src/app/app.component.html -->
<nav>
  <a routerLink="/landing">Landing</a> |
  <a routerLink="/login">Login</a> |
  <a routerLink="/signup">Signup</a> |
  <a routerLink="/homepage">Homepage</a>
</nav>
<hr>
<router-outlet></router-outlet>

6. Testing the Routing

After setting everything up, I tested the routing by clicking the links to make sure each page navigated correctly. If a page didn’t navigate, I checked the routerLink attributes, route paths, and component imports for any typos or errors.