DEV Community: Abhijeet231

Routing in Angular.

Abhijeet231 — Thu, 30 Jul 2026 16:57:12 +0000

Hi, I'm Abhi. I write articles - real ones, not AI slop. Human written, human friendly & for humans.

So I'm a full-stac developer ( MERN / PERN ). React, Express, Node, that's my comfort zone. But recently I started learning Angular, and routing in Angular is a whole different game. Some things are surprisingly nice, some things made me go "why is this so complicated?"

So instead of just learning and forgetting, I thought why not write about it? If you're also a React dev exploring Angular for the first time, this one's for you.

Stay tuned and have a look at the sections below.

What’s in this Article !

How Routing Works in Angular (the mental model, RouterModule, app-routing.module)
Basic Routing Example
Lazy Loading (brief intro)

Before starting, I would like to mention -- I am not an expert in Angular. I just started exploring it and I'm sharing my knowledge here. So you get to see a React guy's POV while learning Angular sideways.

How Routing Works in Angular.

So unlike React - where we have to install npm packages and use React Router or TanStack Router for routing, because React doesn't have routing on its own - in Angular it's totally different. It provides a prebuilt routing architecture that we can use while building projects, and this is what they use in production grade products too.

This is called the Angular Router ( @angular/router ). It comes built-in when you create a project using the Angular CLI.

We don’t have to do npm install, or any third party package, nothing. Just create a project and start routing.

So how to use this? Since i’m using Angular 22 , so we are going to stick to this, we'll be using the standalone approach. If you see older tutorials using RouterModule.forRoot() and app-routing.module.ts , that's the old way. We are not doing that here.

Now before jumping into code, let me quickly explain the key pieces you need to know:

Routes

This is just an array where you define which path should load which component. If you've used React Router, think of it like your route config array. Something like { path: 'about', component: AboutComponent }.

ProvideRouter()

This is how you register your routes in app.config.ts. You pass your routes array inside this function and Angular takes care of the rest.

This is the placeholder in your HTML where the matched component will render. If you know React Router, this is basically <Outlet />. You put this in your app.component.html and Angular will swap components in and out of this spot based on the URL.

routerLink

This is Angular's version of <Link to="/" /> from React Router. Instead of using <a href=""> (which will reload the whole page), you use routerLink for client-side navigation. Looks like this: <a routerLink="/about">About</a>.

That's it. These four things are all you need to set up basic routing in Angular. If you already know React Router, here's a quick cheat sheet:

Basic Routing Example

So , now it’s time to build something. Now we are going to build an Angular app with 4/5 pages.

Follow the steps below:

Step - 1 :

Create a new Angular app.

ng new angular-routing

It will ask you few questions, mae sure to click yes while setting up a new app.

Step - 2 :

Generate the Components

ng g c about
ng g c contact
ng g c home
ng g c pricing

After this your folder structure should look somethig like this-

!image.png

You can add some basic text in those components tempalte files. So that you can identify the pages easily.

Step - 3 :

Now it’s time to define the routes.

In the app folder, you can see a file named as - app.route.ts .

Open this file and initially it shold look like this -

import { Routes } from '@angular/router';

export const routes: Routes = [];

now we are going to write the routing of our project here .

For this- you need to import all components and add them inside the array. this should look like this -

import { Routes } from '@angular/router';
import { About } from './about/about';
import { Contact } from './contact/contact';
import { Home } from './home/home';
import { Pricing } from './pricing/pricing';

export const routes: Routes = [
    {path:'', component: Home},
    {path:'about', component: About},
    {path:'contact', component: Contact},
    {path:'pricing', component: Pricing},
     { path: '**', component: NotFound }
];

If you've used React Router, this is basically your route config array.

That ** refers to wildcard route, you can obviously create a not-found page and assign it there .

Step - 4 :

Now it’s time to register the routes.

Open the app.config.ts file and here we need to register the routes in our app.

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes)
  ]
};

You might have to do this manually or there are high chances it is already done for you, depends on how you configured your app.

Now your entire app has the context of your routing. Now it’s time to use it.

Step - 5 :

Now it’s time to add and navigation links. Open the app.ts file and write this -

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('angular-routing');
}

Important thing to notice here is - In React we don’t need to do this, but in Angular, standalone components need to explicitly declare what they use. Took me a while to get used to this.

Now open the app.html file which is the main template file and write this -

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

<router-outlet></router-outlet>

We are basically creating a navbar here and providing the context for routing here.

If you want you can create separate navbar and use that here. I”m doing this to keep things easy and minimal.

Lazy Loading.

For a small app, this is no big deal. But imagine you are working on a production grade product and you have 50 pages.

But your user just want to see the Home page, but their browser is downloading all 50 pages. Obviously this is not the optimised way to handle things.

Now this is where Lazy Loading comes to the game. It only loads a page’s code when the user actually navigate to it. Not before it.

In React this is the same concept but the difference is only how we implement this concept.

As we discussed earlier how to define routes -

import { AboutComponent } from './pages/about/about.component';

{ path: 'about', component: AboutComponent }

This is where we add lazy loading concept. Now if you want this page to lazily load then you have to do this -

{
  path: 'about',
  loadComponent: () => import('./pages/about/about.component')
    .then(m => m.AboutComponent)
}

Important thing to remember - you don’t have to import it at the top.

Now about component will only load when someone actually clicks on it or navigates to it.

So, that's it for Part 1. We covered how routing works in Angular, set up a basic routing example from scratch, and looked at lazy loading. If you made it this far, you know enough to start building stuff with Angular routing.

In Part 2 we’ll learn about :

Route Parameters & Query Params
Nested / Child Routes
Route Guards

If you found this helpful, share it with your dev friends who are still stuck in the React bubble. And follow me so you don’t miss part 2 .

Happy Coding🌻

JavaScript OOP Explained Without Making Your Brain Hurt

Abhijeet231 — Tue, 10 Mar 2026 07:56:37 +0000

If you are someone who has just started learning Object-Oriented Programming, or you are thinking about learning it, then this is the perfect place to get a basic understanding of OOP..

So let me set the context first, I'm a JavaScript developer (MERN) and i have been using functional programming from past 5/6 months.

Built some project around it. But recently I got some exposure to Object-Oriented Programming, and out of curiosity i learend about it, By the way, I'm still learning.

But in todays articel , i'm going to share all my understanding till now and will try to convey it in a beginner friendly way. So let's get started….

What is Object Oriented Programming

So you must be thinking what does Object Oriented Programming even mean !!

Let me tell you if you are someone like me , who has some prior experience with JavaScript and been buildign things around it and still don't know about Object Oriented Programming.

Then it's 101% sure what you are using till now is known as functional Programming.

So in functional Programming you basically use functions to write code, While writing controller logic, handling database connections, or building API routes, you are mostly using functions everywhere.

And i'm preety sure, you mus have thought about it , if not then now you should connect the dots , you will notice that you have been using functions almost everywhere.. So that's what Functional Programming mean.

But Object Oriented Programming is a way of writing code where we organise things as Objects. These objects contains :

              1.Properties
              2.Methods

const car = {
  barnd: "honda",
  color: "white",
  start: function() {
   console.log("Car started")
 }

 car.start(); // Car Started

Here, brand and color are properties, and start is a method.

This syntax is called as - Object Literal.

Using this syntax, you can access the object's properties and methods.

What is a Class in JavaScript

Class in JavaScript is a blueprint for creating objects.

When we need many Objects with similar dynamic properites (same key but different value for each object) we use class syntax.

class Car {  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " started");
  }

};

const car1 = new Car("Honda", "White");
const car2 = new Car("BMW", "Black");

So now you can create as many objects you need , and they all have the same properties but differnet value, which you pass when creating the object.

Now, if you're not just vibe coding, after seeing the above code you might be thinking:

"Dude, what do constructor and the new keyword even mean?" why are we using these ?

Don't worry you don't have to go to chatGpt and ask all this. Because i already did that for you. 😌

But you can obviously go and argue with GPT , ask him questions to increase your understanding.

What is a Constructor & new keyword ??

A constructor is a special method that runs automatically when an object is created.

It is usually used to initialize properties for the object.


class Car {  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " started");
  }
}

const car1 = new Car("Honda", "White");
const car2 = new Car("BMW", "Black");

In this code the constructor is takign 2 values - brand and color & assigning them to the object using this keyword.

Now as you can see - while creating eveyr object - each time we are using new keyword, but why?
So when we do -

const car1 = new Car("Honda", "White");

Now JavaScript is doing several things behind the scenes.

It creates a new empty object in memory
It links that object to the Car class prototype.
It runs the constructor and passes the arguments ("Honda", "White").
It returns the newly created object.

So after running this code, now the object looks something like this -
{ brand: "Honda", color: "White" }

And it also has the access to all methods declared inside the class.

Every time we are doing - new Car() , we are creating new objects.

This whole "class" thing in javascript allows us to create as many objects we want by using a single blueprint.

But you must have been thinking, if we create many objects, will the methods be copied many times?

The answer is no..
So let's talk about memory management a little bit , so t hat you can have a better clarity.

How memory optimization works

All objects created from a class share the same methods through the prototype. This helps JavaScript avoid duplicating methods in memory.

So when we write this code -

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  start() {
    console.log("Car started");
  }
}

The start() method is not duplicated for every object. Instead, JavaScript stores it once in something called the prototype, and every object simply references it.

So this means -

Each object stores its own data.
But all objects share the same method.

Now we have one more important thing to cover, which is known as Encapsulation. So let's try to understand what does it even mean ? And how it works ?

Basic Idea of Encapsulation

Encapsulation is one of the core ideas in Object-Oriented Programming.

In simple terms, encapsulation means hiding the internal details of an object and allowing access only through controlled methods.
Think abut it like using a keyboard.

You press a specific key and the key types in you computer. But don't directly manipulate the keyboards internal circuits.

The complex implemention is hidden from you.
In Programming, encapsulation works the same way. We protect important data inside a class and allow interaction through specific methods.

In JavaScript, encapsulation is mainly done using :

private fields (#)
Getters
Setters
Closures

And If you are using Typescript then you also have public & private keywords like Java or C++.

For now, I'm just sharing the basic idea of encapsulation here, because I'm still learning it myself and don't fully understand it yet.

Once I learn it properly and get a deeper understanding, I'll definitely write another article explaining it in detail.

So stay tuned! And if this blog helped you in any way, feel free to follow me for more learning notes and articles.

Summary

OOP organises code using objects
Classes act as blueprint for objects
The constructor initializes object data
The new keyword creates a new object
Methods are shared through prototypes for memory efficiency
Encapsulation hides internal detials & protects data

If you found this helpful, feel free to connect with me on my social handles. I regularly share about what I'm learning on my social handles.
🔹LinkedIn 🌻
🔹X 🌻