Angular Introduction

What is Angular?#

Angular is a full, opinionated, TypeScript-first framework for building web applications — maintained by Google. Where React and Vue are best described as libraries you assemble a stack around (choosing your own router, state management, and HTTP client), Angular ships nearly all of that as one cohesive, "batteries included" platform: routing, dependency injection, HTTP client, forms handling, and a full CLI-driven build pipeline are all part of the framework itself, designed to work together out of the box.

This makes Angular's learning curve steeper up front — there's more to learn before you're productive, and more structure imposed on how a project is organized — but it also means large teams get a consistent, opinionated architecture "for free" instead of having to assemble and agree on one themselves. Angular is written in and designed around TypeScript; while technically possible to use with plain JavaScript, virtually all real Angular code, tooling, and documentation assumes TypeScript.

Installing the Angular CLI#

Angular projects are almost always created and managed through the Angular CLI, a command-line tool that scaffolds projects, generates components/services, and runs the dev server and build pipeline:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve

ng new asks a few setup questions (stylesheet format, routing, server-side rendering) and scaffolds a complete, working application. ng serve starts a dev server with hot reloading, by default at http://localhost:4200.

The generated project structure#

A freshly generated Angular project's src/ directory looks roughly like this:

src/
├── app/
│   ├── app.component.ts        # the root component's logic
│   ├── app.component.html      # the root component's template
│   ├── app.component.css       # the root component's styles
│   └── app.config.ts           # application-wide providers and configuration
├── index.html                  # the single HTML page the app mounts into
├── main.ts                     # bootstraps the application
└── styles.css                  # global styles

main.ts is the entry point — it bootstraps the root component into the page:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";

bootstrapApplication(AppComponent, appConfig);

This bootstrapApplication approach (standalone, without a root NgModule) is the current, modern default — older Angular tutorials you'll find online often show an AppModule wrapping everything instead. This track uses standalone components throughout, which is what new Angular projects generate by default today.

Every piece of Angular functionality — a component, a template, a service — is a TypeScript class decorated with a special annotation (@Component, @Injectable, etc.) that tells Angular's compiler what role that class plays and how to wire it into the rest of the application. The next few pages walk through each of those building blocks.

Common mistakes#

• Writing plain JavaScript .js files and expecting them to integrate smoothly — Angular's tooling, decorators, and dependency injection are built around TypeScript's type system and compilation step.
• Following an older tutorial's NgModule-centric setup (AppModule, declarations, imports) as if it were still the default — standalone components, bootstrapped directly via bootstrapApplication, are the current recommended approach for new projects.
• Underestimating Angular's initial learning curve because "it's just another frontend framework" — its built-in dependency injection system and stricter project structure are genuinely more to learn upfront than picking up React or Vue, even though they pay off at larger team/application scale.