What is Angular and how does it differ from AngularJS?

Q: What is Angular and how does it differ from AngularJS?

**Target Audience:** Anyone preparing for an Angular interview — assumes basic JavaScript, no Angular or AngularJS required. **Difficulty:** Easy > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The output in section 5 was produced by compiling and running the example on Angular 22.2.3, and the default-behaviour claims in section 6 were read from the Angular 22.2.3 package itself. ## 1. Why This Even Matters — A Story First Imagine an old office building where every light switch is wired to a bell in the basement. Whenever anyone flips any switch, a caretaker walks every corridor checking every single bulb to see which ones changed, then walks them all again just in case his first walk changed something. It works, and in a small building nobody notices. In a skyscraper the caretaker never sits down. That caretaker is **AngularJS**, the 2010 framework. Its

The problem

Question presented to candidate: "Our legacy admin panel is on AngularJS 1.8 and the new product is on Angular 22. Explain what Angular is, and why moving between the two is a rewrite rather than an upgrade."

What a strong answer should cover:

Angular is a TypeScript-first, batteries-included framework from Google: components, routing, forms, HTTP, DI, testing and a CLI ship together.
AngularJS (1.x) is a different framework: JavaScript, controllers and $scope, and a digest loop that dirty-checks every watcher.
Angular (2016 onwards) was a ground-up rewrite: components instead of controllers, templates compiled ahead of time into instructions, typed DI, and now signals for fine-grained reactivity.
AngularJS support ended in January 2022; Angular is actively maintained and versioned semantically.
Modern defaults matter: standalone components (v19), zoneless change detection (v21), OnPush by default (v22).
Migration is incremental at best (ngUpgrade hybrid apps) and in practice a rewrite, because the mental models do not map one to one.

Clarifying questions expected:

"Do you mean the history, or what changes for the team day to day?"
"Is the plan a big-bang rewrite or a hybrid app that migrates screen by screen?"

Code / implementation expected: Optional — a small standalone component with signals to contrast with a $scope controller.

angular
basics

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Anyone preparing for an Angular interview — assumes basic JavaScript, no Angular or AngularJS required. Difficulty: Easy

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. The output in section 5 was produced by compiling and running the example on Angular 22.2.3, and the default-behaviour claims in section 6 were read from the Angular 22.2.3 package itself.

1. Why This Even Matters — A Story First

Imagine an old office building where every light switch is wired to a bell in the basement. Whenever anyone flips any switch, a caretaker walks every corridor checking every single bulb to see which ones changed, then walks them all again just in case his first walk changed something. It works, and in a small building nobody notices. In a skyscraper t

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularSignals and computed state in a standalone Angular 22 component

Open in playground

import { Component, VERSION, computed, signal } from "@angular/core";

// Modern Angular: a TypeScript class + decorator, typed state, no $scope.
@Component({
  selector: "app-root",
  template: `
    <h3>Angular {{ version }}</h3>
    <label>
      Price per seat
      <input type="number" [value]="price()" (input)="price.set(+$any($event.target).value)" />
    </label>
    <button (click)="seats.update(n => n + 1)">Add seat</button>
    <p>{{ seats() }} seats x {{ price() }} = {{ total() }}</p>
  `,
})
export class AppComponent {
  version = VERSION.full;
  // signal(): a value Angular can track. computed(): derived, cached, re-run only when an input changes.
  price = signal(12);
  seats = signal(3);
  total = computed(() => this.seats() * this.price());
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.