Learn Angular

What Is Angular?

Angular is an open-source framework, maintained by Google, for building single-page applications (SPAs) and complex user interfaces. Unlike a small view library, Angular ships as a complete platform: routing, forms, HTTP communication, dependency injection, animations, and a command-line tool all arrive together, out of the box, following official conventions.

Angular applications are written primarily in TypeScript, a superset of JavaScript that adds static types, interfaces, and decorators. The Angular compiler uses this extra information to catch mistakes at build time, generate highly optimized JavaScript, and power editor features like autocomplete and inline error checking.

Why TypeScript Matters

Every Angular file you write - components, services, modules - is a TypeScript class. TypeScript's type system means a typo in a property name, or passing a string where a number is expected, is caught before the app ever runs, not discovered by a user in production.

• Static typing catches mistakes during development, not at runtime
• Decorators (like @Component and @Injectable) attach metadata Angular uses to build your app
• Interfaces describe the shape of data flowing between components and services
• Modern JavaScript features (classes, modules, async/await) work out of the box
• Excellent IDE support: autocomplete, refactoring, and inline documentation

Components: The Building Blocks

An Angular application is a tree of components. Each component pairs a TypeScript class (the logic and data) with an HTML template (the view) and, usually, a CSS file (the styling). Modern Angular favors standalone components, which declare their own dependencies directly instead of being registered inside an NgModule.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class GreetingComponent {
  name = 'Angular';
}

bootstrapApplication(GreetingComponent).catch(err => console.error(err));

The @Component decorator is what turns a plain class into something Angular recognizes. The selector property defines the custom HTML tag - <app-greeting></app-greeting> - that renders this component wherever it is used.

How Angular Fits Together

import { Component, Injectable } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Injectable({ providedIn: 'root' })
export class CounterService {
  private count = 0;

  increment(): number {
    return ++this.count;
  }
}

// Demo component showing the service injected via constructor injection.
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p>Count: {{ current }}</p>
    <button (click)="onIncrement()">+1</button>
  `
})
export class AppComponent {
  current = 0;

  constructor(private counterService: CounterService) {}

  onIncrement(): void {
    this.current = this.counterService.increment();
  }
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

// GreetingComponent would normally live in its own file, ./greeting.component.ts,
// and be imported from there. It is inlined here so this example is a single,
// self-contained, runnable file.
@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`
})
export class GreetingComponent {
  name = 'Angular';
}

bootstrapApplication(GreetingComponent).catch(err => console.error(err));