How Does Angular Work?

Anil Kumar

2 min read

·

Jan 1, 2026

--

Listen

Share

Press enter or click to view image in full size

Angular is one of the most powerful front-end frameworks for building dynamic, single-page applications (SPAs). But have you ever wondered what happens behind the scenes when you run an Angular app? Let’s break it down step by step.

✅ 1. Angular Architecture Overview

Angular is built on a component-based architecture. Every Angular application consists of:

• Components (UI + logic)
• Modules (grouping components and services)
• Services (business logic, data handling)
• Templates (HTML with Angular directives)
• Dependency Injection (DI) system

✅ 2. Compilation Process

Angular uses Ahead-of-Time (AOT) or Just-in-Time (JIT) compilation to convert templates into executable JavaScript.

• JIT Compilation Happens in the browser at runtime. Used in development for faster builds.
• AOT Compilation Happens during build time. Produces optimized code for production.

Example:

<h1>{{ title }}</h1>

Compiled into efficient JavaScript instructions:

ɵɵelementStart(0, "h1");
ɵɵtextBinding(1, ctx.title);
ɵɵelementEnd();

✅ 3. Bootstrapping

When you run ng serve or load the app:

• Angular bootstraps the root module (AppModule).
• Creates the root component (AppComponent).
• Initializes the dependency injection tree.

✅ 4. Change Detection

Angular uses a zone-based mechanism (Zone.js) to track asynchronous operations and update the DOM when data changes.

Get Anil Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Subscribe

Subscribe

Remember me for faster sign in
• Default Strategy: Checks all components in the tree.
• OnPush Strategy: Checks only when inputs change (for performance).

✅ 5. Rendering

• Angular updates the DOM based on the component’s template and data bindings.
• Uses incremental DOM for efficient updates.

✅ 6. Dependency Injection

Angular’s DI system provides services to components without manual instantiation:

@Injectable({ providedIn: 'root' })
export class DataService {
getData() { return 'Hello Angular'; }
}

Injected into a component:

constructor(private dataService: DataService) {}

✅ 7. Routing

Angular Router enables SPA navigation without full page reload:

const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

✅ 8. Lifecycle Hooks

Angular components go through lifecycle stages:

• ngOnInit() – Initialization
• ngOnChanges() – Input changes
• ngOnDestroy() – Cleanup

✅ Summary

Angular works by:

1. Compiling templates into JavaScript.
2. Bootstrapping modules and components.
3. Managing state and DOM updates via change detection.
4. Injecting dependencies for modular design.
5. Handling navigation with the router.

This combination of AOT compilation, incremental DOM, and DI makes Angular fast, scalable, and suitable for enterprise-grade apps.