What is Angular?
Angular is Google’s complete framework for building big, organised single-page apps — and it gives you everything in one box.
What you will learn
- Explain what Angular is and why teams pick it
- Understand what a single-page app (SPA) is
- Meet components and the Angular CLI
A complete framework, not a small helper
Angular is a front-end framework made by Google. A framework gives you a full, ready-made structure for building an app, so you do not invent everything yourself and a whole team can work the same way.
Some tools are small libraries — one helpful piece you add yourself. Angular is the opposite: it is batteries-included. Routing, forms, data fetching and a way to organise code all come in the box. That is why it shines for large applications.
Angular is written in TypeScript (JavaScript with types). You already know a little TypeScript, and that is all you need to start.
What is a single-page app?
An old website loads a brand-new HTML page from the server every time you click a link — the screen flashes white and reloads. A single-page app (SPA) loads once, then swaps the content on the screen with JavaScript as you move around. It feels fast and smooth, like a phone app.
| Old multi-page site | Single-page app (Angular) | |
|---|---|---|
| On each click | Server sends a whole new page | JavaScript swaps just the content |
| Feel | A reload / flash each time | Smooth, app-like |
| Good for | Simple content sites | Rich, interactive apps |
Components and the CLI
In Angular you build your screen from components — small, reusable building blocks (a header, a task row, a button). You assemble components like LEGO bricks to make a whole app.
Here is the tiniest taste of a component — do not worry about every detail yet, just notice it pairs a small class with some HTML:
// a tiny Angular component (we explain every part later)
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
template: '<h1>Hello from Angular!</h1>'
})
export class HelloComponent {}Note: Output (where you place <app-hello> on the page):
Hello from Angular!
The selector is the tag you use to drop this block onto a page, and the template is the HTML it shows. You will build components just like this throughout the course.
You will also use the Angular CLI — a command-line tool that creates the project for you, runs it, and generates new components so you do not write boilerplate by hand.
Tip: Think of Angular like a fully-furnished apartment: the kitchen, beds and wiring are already there. A small library is more like an empty room where you bring each item yourself.
Q. Which sentence best describes Angular?
✍️ Practice
- List three apps or sites you use that feel like single-page apps (smooth, no full reloads).
- Write one sentence on the difference between a framework and a small library.
🏠 Homework
- In 3–4 sentences, explain to a friend what Angular is and why a big team might choose it.