Introduction to Angular

Angular is a complete, opinionated framework for building web applications with TypeScript. This introduction explains what Angular is, how it differs from a plain JavaScript library, and why teams choose it for large, long-lived applications.

What Is Angular?

Angular is an open-source, TypeScript-based application framework maintained by Google. Unlike a small UI library, Angular ships with a component model, a template syntax, dependency injection, a router, form handling, and an HTTP client, so most applications can be built without stitching together dozens of third-party packages.

Applications are built out of components: small, reusable pieces of UI, each with a TypeScript class for logic and an HTML template for the view. Angular compiles this combination ahead of time into highly optimized JavaScript that runs in the browser.

import { Component } from '@angular/core';

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

A component pairs a TypeScript class with a template. The double curly braces are Angular's interpolation syntax for inserting values into HTML.

How an Angular App Is Structured

main.ts  -->  bootstrapApplication(AppComponent)
                    |
                    v
             AppComponent (root)
             /            \
      ChildComponent   ChildComponent
         |
      Services (injected)

Every Angular app starts by bootstrapping a root component from main.ts.
Components form a tree; each component can render child components.
Services hold shared logic and data, and are provided to components through dependency injection.
Modern Angular (v17+) defaults to standalone components instead of NgModule-based apps.

Angular Quick Reference

The core pieces you will meet throughout this course, each covered in its own lesson.

Concept	Example	Purpose
Component	`@Component({ ... })`	Defines a reusable piece of UI
Template	`template` or `templateUrl`	Describes the component's HTML
Interpolation	`{{ value }}`	Insert a value into the template
Property binding	`[prop]="value"`	Bind a DOM property to a class field
Event binding	`(click)="handler()"`	React to DOM events
Directive	`*ngIf`, `@if`	Add behavior or structure to the DOM
Service	`@Injectable()`	Share logic and state via DI
Router	`RouterModule`, `provideRouter`	Navigate between views

Why Angular Exists

Before frameworks like Angular, building interactive web applications meant manually wiring up DOM updates, event listeners, and state, which became unmanageable as applications grew. Angular (originally AngularJS in 2010, then rewritten as "Angular" in 2016) was created to give large teams a consistent, batteries-included way to build and scale single-page applications.

Because Angular is opinionated about structure, dependency injection, and tooling, large teams working on the same codebase tend to produce more consistent, testable code than with an unopinionated library.

Provides a full application platform, not just a rendering library.
Uses TypeScript by default, catching type errors before runtime.
Ships an official CLI, router, forms module, and HTTP client.
Backed by Google with a predictable, versioned release schedule.

Angular vs AngularJS

"AngularJS" refers to the original 1.x framework released in 2010, built with plain JavaScript. "Angular" (sometimes called Angular 2+) is a complete rewrite released in 2016 using TypeScript and a component-based architecture. They are not compatible, and AngularJS reached end-of-life in January 2022.

	AngularJS (1.x)	Angular (2+)
Language	JavaScript	TypeScript
Architecture	Controllers and $scope	Components and classes
Status	End of life	Actively developed

What You Should Know Before Starting

Angular assumes comfort with modern JavaScript and basic TypeScript syntax (types, interfaces, classes, decorators). You do not need to be an expert, Angular's CLI and strong typing will teach you a lot along the way, but recognizing class, interface, and arrow functions will help.

HTML and CSS fundamentals.
JavaScript ES6+ features: const/let, arrow functions, modules, destructuring.
Basic TypeScript: types, interfaces, and classes (you will learn Angular-specific decorators as you go).
Command-line comfort, since the Angular CLI drives most day-to-day development.

Common Mistakes

Confusing AngularJS (1.x) tutorials and packages with modern Angular; they are entirely different frameworks.
Trying to learn RxJS, NgRx, and SSR before understanding components and templates.
Skipping TypeScript basics and getting stuck on decorator or type errors that aren't Angular-specific.
Assuming Angular requires NgModule; modern Angular defaults to standalone components.

Key Takeaways

Angular is a complete TypeScript-based framework, not just a view library.
Applications are built from a tree of components, each with a class and a template.
Angular ships routing, forms, and HTTP handling out of the box.
Angular (2+) is a full rewrite of AngularJS (1.x) and the two are incompatible.

Pro Tip

When searching for help online, always add a version-neutral term like "Angular" plus the current major version (for example "Angular 17") to your search, since AngularJS (1.x) content still ranks highly but no longer applies to modern Angular.