What is Angular?

Chapter 1

What Angular Is, TypeScript Primer, CLI Setup

A different philosophy from React — a full framework instead of a library, TypeScript instead of plain JavaScript

React is deliberately a library: it renders UI, and everything else — routing, forms, HTTP, state management — is a separate choice (React Router, Zustand, fetch/React Query, all covered as add-ons across the React course). Angular is a full framework: routing, forms, dependency injection, and an HTTP client are all built in from day one, with one official, opinionated way to do each. It's also written in and built around TypeScript — JavaScript with optional type annotations — rather than plain JavaScript.

Just Enough TypeScript to Get Started

let age: number = 35;
let name: string = "Philip";

interface Person {
  name: string;
  age: number;
  email?: string;  // the ? marks this property optional
}

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

: type annotations are the core addition — declaring what a variable, parameter, or return value is allowed to be, checked while writing code rather than only discovered when it crashes at runtime. An interface describes the shape an object must have; greet's parameter being typed as Person means passing an object missing name or age is flagged immediately by the editor, before the code ever runs. Classes already exist in plain JavaScript (JS Intermediate Chapter 3) — TypeScript just lets a class's properties and methods carry the same type annotations.

TypeScript compiles to JavaScript

None of this runs directly in a browser — TypeScript is compiled down to plain JavaScript before it does, with the type annotations stripped out entirely (they exist purely to help while writing and reading the code). Angular's tooling handles this compilation step automatically; there's no separate command to remember.

Installing the Angular CLI and Creating a Project

# install once, globally
npm install -g @angular/cli

# create a new project
ng new my-app
cd my-app
ng serve

ng new my-app asks a few setup questions (routing, stylesheet format) and scaffolds a complete starter project — Angular's CLI does considerably more for you upfront than Vite's React template did. ng serve starts a local dev server (usually http://localhost:4200) with live reload, the same role npm run dev played throughout the React course.

A Generated Project's Anatomy

src/main.ts — the entry point; bootstraps the root component into the page.
src/app/app.component.ts — the root component's logic (a TypeScript class).
src/app/app.component.html — that same component's template (its markup) — Angular keeps logic and markup in separate files by default, unlike JSX combining both.
src/app/app.component.css — styles scoped to just this component.
src/app/app.component.spec.ts — a test file, generated automatically alongside every component (covered properly in Chapter 14).

A First Component

// greeting.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  templateUrl: './greeting.component.html',
})
export class GreetingComponent {
  name = 'Philip';
}

<!-- greeting.component.html -->
<h1>Hello, {{ name }}!</h1>

@Component({...}) is a decorator — metadata attached to the class right above it, telling Angular how to treat GreetingComponent: selector is the HTML tag name (<app-greeting>) used to place it elsewhere, and templateUrl points to its separate HTML file. {{ name }} in the template is interpolation — Angular's equivalent of JSX's {name}, inserting the class property's current value directly into the rendered output.

standalone: true is the modern default

Older Angular tutorials build everything around NgModule — a separate declaration file grouping components together. Recent Angular versions (and a fresh ng new project today) default to standalone components instead, each one self-contained and importable directly without belonging to a module — the approach used throughout this entire course. If older documentation or Stack Overflow answers reference NgModule, that's the previous convention, not a mistake in what's taught here.

	React	Angular
Category	Library (you choose the rest)	Full framework (routing/forms/HTTP built in)
Language	JavaScript (+ optional TS)	TypeScript by default
Markup	JSX — embedded in the same file as logic	Separate template file (or inline) per component
Embedding a value	`{value}`	`{{ value }}`

Coding Challenges

Challenge 1

Install the Angular CLI, create a new project, and modify the default AppComponent so its template shows "Welcome, [your name]!" using interpolation of a class property.

📄 View solution

Challenge 2

Write a Person interface (name: string, age: number, email optional) and a function describePerson(person: Person): string returning a sentence describing them, called with at least one object missing the optional property.

📄 View solution

Challenge 3

Use the CLI (ng generate component) to create a new standalone component with its own template showing some static content, then use its selector tag inside AppComponent's template to display it.

📄 View solution

Chapter 1 Quick Reference

Angular — a full framework (routing/forms/HTTP built in), TypeScript-first
: type annotations, interface — TypeScript's core additions over plain JS
ng new / ng serve — CLI project creation and dev server, Angular's equivalent of Vite's commands
@Component({...}) — a decorator configuring a class as an Angular component
{{ value }} — interpolation, Angular's equivalent of JSX's {value}
standalone: true — the modern default, used throughout this course instead of older NgModule-based setup
Next chapter: components and templates in depth