Saturday, 15 February 2025

Angular 18 Navigation for iMMSS

🚀 Setting Up Angular Routing - The Fun Way! 😆

Hey there, future Angular ninjas! 🥷 If you’re new to Angular and struggling with routing, don’t worry! We’ve got a simple, fun guide that even your lazy friend who never codes can follow. Let's go! 🎉

Step 1: Unlock the Terminal Superpowers ⚡

Open your terminal and type this magic spell:

Set-ExecutionPolicy Unrestricted -Scope CurrentUser

(If your computer starts talking back, run away! Just kidding 😜, this just allows scripts to run.)

Step 2: Summon a New Angular App 🏗️

ng new routing

Now, check if the server is alive:

ng serve

If everything is working, you should see some Angular awesomeness at localhost:4200. 🎯

Step 3: Create Pages Like a Pro 📄

Run these one by one in the terminal to create your components:

ng g c home
ng g c contact
ng g c about
ng g c services

Boom 💥! You just made pages like a coding boss.

Step 4: The Magic Routing Spell 🧙‍♂️

Open app.routes.ts and change its contents to this:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const routes: Routes = [
    {path:"home", component:HomeComponent},
    {path:"contact", component:ContactComponent},
    {path:"about", component:AboutComponent},
    {path:"services", component:ServicesComponent},
];

Now your app knows where to go when you click a link! 🗺️

Step 5: Delete and Replace 🗑️➡️📜

Go to app.component.html, erase everything, and add this:

<h1>Testing Routing</h1>
<router-outlet></router-outlet>

Run:

ng serve

Now, check in your browser:

localhost:4200
localhost:4200/home
localhost:4200/contact
localhost:4200/about
localhost:4200/services

Enjoy watching the URLs change like magic! 🎩✨

Step 6: Auto-Redirect to Home 🏠

Modify app.routes.ts again:

{path:"", redirectTo:"/home", pathMatch:'full'},

Now, when someone opens your app, they go straight to /home. No confusion, just pure routing genius! 🧠

Step 7: Add a Navigation Menu 🧭

Modify app.component.ts first:

import { RouterLink, RouterOutlet } from '@angular/router';  

imports: [RouterOutlet, RouterLink],

Now, in app.component.html, add this stylish navbar:

<h1>Testing Routing</h1>
<nav>
  <a routerLink="/home">Home</a>  |
  <a routerLink="/contact">Contact</a> |
  <a routerLink="/services">Services</a> |
  <a routerLink="/about">About</a> |
</nav>
<router-outlet />

Check it in your browser and feel like a pro! 🤩

Step 8: Highlight Active Links 🔥

Modify app.component.html to add active styling:

<h1>Testing Routing</h1>
<nav>
  <a routerLink="/home" routerLinkActive="active-home">Home</a>  |
  <a routerLink="/contact" routerLinkActive="active-contact">Contact</a> |
  <a routerLink="/services" routerLinkActive="active-services">Services</a> |
  <a routerLink="/about" routerLinkActive="active-link">About</a> |
</nav>
<router-outlet />

Now, create a style sheet to make it pop! 🎨

.active-link {
    color: red;
}
.active-home {
    color:aqua;
}
.active-about {
    color:blue;
}
.active-services {
    color: rgb(238, 47, 255);
}
.active-contact {
    color:rgb(38, 236, 203);
}

Bam! Your links change colors when clicked! 🌈

STEP 9 :

Create Docker file with the followingcontents

FROM node:latest
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install -g @angular/cli
RUN npm install
CMD ["ng", "serve", "--host", "0.0.0.0"] 

docker build -t angular_practice

docker run -p 8080:4200 angular_practice

➜ Local: http://localhost:4200/
➜ Network: http://172.17.0.3:4200/

Bonus: Learn More 🎥

Watch this video if you’re stuck: 👉 Programmatic Navigation

Congratulations, you just built a routing system in Angular! 🎉 Now, go flex on your friends! 😎

AMET-SOLID