Skip to content

Commit 14062ff

Browse files
manthanankmanthanank
committed
docs: enrich Angular guide with 7-stage masterclass, Mermaid architectures, and line-by-line breakdowns
1 parent ffd2ee6 commit 14062ff

1 file changed

Lines changed: 143 additions & 28 deletions

File tree

‎README.md‎

Lines changed: 143 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,55 @@
1-
# Learn Angular
2-
3-
This repository contains a list of resources to learn Angular. It includes tutorials, articles, videos, books, and other resources to help you learn Angular from scratch.
4-
5-
![npm](https://img.shields.io/npm/dw/learn-angular)
6-
![npm](https://img.shields.io/npm/dm/learn-angular)
7-
![npm](https://img.shields.io/npm/dy/learn-angular)
8-
![npm](https://img.shields.io/npm/dt/learn-angular)
9-
![GitHub issues](https://img.shields.io/github/issues/manthanank/learn-angular)
10-
![GitHub pull requests](https://img.shields.io/github/issues-pr/manthanank/learn-angular)
11-
![GitHub](https://img.shields.io/github/license/manthanank/learn-angular)
12-
![GitHub last commit](https://img.shields.io/github/last-commit/manthanank/learn-angular)
13-
![GitHub top language](https://img.shields.io/github/languages/top/manthanank/learn-angular)
14-
![GitHub repo size](https://img.shields.io/github/repo-size/manthanank/learn-angular)
15-
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/manthanank/learn-angular)
16-
![GitHub contributors](https://img.shields.io/github/contributors/manthanank/learn-angular)
17-
![GitHub forks](https://img.shields.io/github/forks/manthanank/learn-angular)
18-
![GitHub stars](https://img.shields.io/github/stars/manthanank/learn-angular)
19-
![GitHub watchers](https://img.shields.io/github/watchers/manthanank/learn-angular)
20-
21-
## Table of Contents
1+
# Learn Angular 🅰️
2+
3+
<div align="center">
4+
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6+
[![Angular Version](https://img.shields.io/badge/Angular-21.2+-DD0031.svg?logo=angular)](https://angular.dev/)
7+
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue.svg?logo=typescript)](https://www.typescriptlang.org/)
8+
[![Zoneless Ready](https://img.shields.io/badge/Reactivity-Signals%20%26%20Zoneless-purple.svg)](https://angular.dev/guide/signals)
9+
[![SSR & Hydration](https://img.shields.io/badge/Rendering-Event%20Replay%20%26%20SSR-brightgreen.svg)](https://angular.dev/guide/ssr)
10+
[![Production Ready](https://img.shields.io/badge/Status-Enterprise%20Grade-blue.svg)](https://github.com/manthanank/learn-angular)
11+
12+
**An exhaustive, production-grade masterclass from absolute zero to staff-level Angular platform architecture.**
13+
Master standalone applications, modern Signals reactivity, `@defer` incremental hydration, hierarchical dependency injection, functional router guards, reactive forms, and zoneless performance.
14+
15+
[Getting Started](#-getting-started) • [Standalone Components](#2-stage-2-standalone-components-templates--modern-control-flow) • [Signals & Reactivity](#3-stage-3-modern-signals-reactivity--state-management) • [Dependency Injection](#4-stage-4-hierarchical-dependency-injection--routing) • [Forms & HTTP](#5-stage-5-enterprise-reactive-forms--http-client) • [SSR & Performance](#6-stage-6-server-side-rendering-ssr-deferrable-views--performance) • [Interview Prep](#7-stage-7-staff-angular-architect-interview-handbook--cheatsheet)
16+
17+
<br/>
18+
19+
<a href="https://www.buymeacoffee.com/manthanank">
20+
<img src="public/bmc-button.svg" alt="Buy Me A Coffee" width="180">
21+
</a>
22+
23+
</div>
24+
25+
---
26+
27+
## 🗺️ 7-Stage Pedagogical Roadmap
28+
29+
```mermaid
30+
flowchart LR
31+
S1["Stage 1: Foundations & Standalone"] --> S2["Stage 2: Components & Templates"]
32+
S2 --> S3["Stage 3: Signals & Reactivity"]
33+
S3 --> S4["Stage 4: DI & Routing"]
34+
S4 --> S5["Stage 5: Reactive Forms & HTTP"]
35+
S5 --> S6["Stage 6: SSR, @defer & Perf"]
36+
S6 --> S7["Stage 7: Staff Architect Handbook"]
37+
```
38+
39+
| Stage | Focus Domain | Core Concepts & Engineering Outcomes |
40+
| :--- | :--- | :--- |
41+
| **Stage 1** | **Absolute Beginner Foundations** | Standalone bootstrapping (`bootstrapApplication`), application configuration, TypeScript 5 essentials. |
42+
| **Stage 2** | **Components & Modern Control Flow** | Standalone components, `@if`, `@for (track)`, `@switch`, template bindings, content projection. |
43+
| **Stage 3** | **Modern Signals Reactivity** | Fine-grained reactivity (`signal`, `computed`, `effect`), `input()`/`output()`, RxJS `toSignal()`, zoneless change detection. |
44+
| **Stage 4** | **Hierarchical DI & Routing** | Tree-shakeable providers, `inject()` function, functional route guards (`canActivateFn`), resolvers, lazy loading. |
45+
| **Stage 5** | **Reactive Forms & HTTP Engine** | Strongly-typed `FormGroup`, async validators, functional interceptors (`HttpInterceptorFn`), retry strategies. |
46+
| **Stage 6** | **SSR, @defer & Enterprise Performance** | Event replay, incremental DOM hydration, `@defer` trigger conditions (`on viewport`, `on idle`), OnPush profiling. |
47+
| **Stage 7** | **Staff Architect Interview Handbook** | Zone.js patching vs Zoneless microtasks, Module Federation, 40+ staff-level interview Q&As, cheat sheet. |
48+
49+
---
50+
51+
52+
## 📋 Table of Contents
2253

2354
- [Introduction](#introduction)
2455
- What is Angular?
@@ -486,7 +517,53 @@ This repository contains a list of resources to learn Angular. It includes tutor
486517
- Newsletters
487518
- Podcasts
488519

489-
## Introduction
520+
## 1. Stage 1: Absolute Beginner Foundations & Standalone Architecture
521+
522+
### 1.1 Architecture & Philosophy
523+
```mermaid
524+
flowchart TD
525+
Main["main.ts: bootstrapApplication(AppComponent, appConfig)"] --> AppConfig["app.config.ts: ApplicationConfig"]
526+
AppConfig --> Providers["provideRouter(), provideHttpClient(), provideClientHydration()"]
527+
Providers --> RootEnv["Root EnvironmentInjector"]
528+
RootEnv --> RootComp["AppComponent (Standalone Component)"]
529+
RootComp --> ChildComps["Child Standalone Components (Direct Imports)"]
530+
```
531+
532+
### Line-by-Line Code Breakdown: Standalone Bootstrapping (`src/main.ts` & `src/app/app.config.ts`)
533+
534+
```typescript
535+
// app.config.ts
536+
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
537+
import { provideRouter, withComponentInputBinding } from '@angular/router';
538+
import { provideHttpClient, withInterceptors } from '@angular/common/http';
539+
import { routes } from './app.routes';
540+
import { authInterceptor } from './core/auth.interceptor';
541+
542+
export const appConfig: ApplicationConfig = {
543+
providers: [
544+
provideZoneChangeDetection({ eventCoalescing: true }),
545+
provideRouter(routes, withComponentInputBinding()),
546+
provideHttpClient(withInterceptors([authInterceptor]))
547+
]
548+
};
549+
550+
// main.ts
551+
import { bootstrapApplication } from '@angular/platform-browser';
552+
import { AppComponent } from './app/app';
553+
import { appConfig } from './app/app.config';
554+
555+
bootstrapApplication(AppComponent, appConfig)
556+
.catch((err) => console.error('[Bootstrap Error]', err));
557+
```
558+
559+
| Statement / API | Architectural Role | Pedagogical Runtime Mechanism |
560+
| :--- | :--- | :--- |
561+
| `ApplicationConfig` | **Configuration Interface** | Replaces historic `AppModule`. Holds the global array of environment providers passed during application bootstrap. |
562+
| `provideZoneChangeDetection({ eventCoalescing: true })` | **Event Coalescing** | Coalesces multiple microtasks and DOM events into a single change detection tick, significantly reducing redundant template re-evaluations. |
563+
| `withComponentInputBinding()` | **Router Feature** | Automatically maps route parameters (`:id`) and query parameters directly into component inputs (`input<string>()`) without subscribing to `ActivatedRoute`. |
564+
| `provideHttpClient(withInterceptors([...]))` | **HTTP Engine** | Configures tree-shakeable, functional HTTP interceptors instead of legacy multi-provider class tokens (`HTTP_INTERCEPTORS`). |
565+
| `bootstrapApplication(AppComponent, appConfig)` | **Platform Bootstrapper** | Mounts the root standalone component directly to the DOM host element without declaring an intermediate `NgModule`. |
566+
490567

491568
### What is Angular?
492569

@@ -1864,7 +1941,19 @@ import { AngularFireAnalyticsModule } from "@angular/fire/analytics";
18641941
import { AngularFireAuthGuardModule } from "@angular/fire/auth-guard";
18651942
```
18661943

1867-
## Components
1944+
## 2. Stage 2: Standalone Components, Templates & Modern Control Flow
1945+
1946+
```mermaid
1947+
flowchart TD
1948+
subgraph ControlFlow["Modern Angular Control Flow"]
1949+
IfBlock["@if (condition) { ... } @else { ... }"]
1950+
ForBlock["@for (item of items(); track item.id) { ... } @empty { ... }"]
1951+
SwitchBlock["@switch (status()) { @case ('active') { ... } }"]
1952+
DeferBlock["@defer (on viewport) { &lt;heavy-chart /&gt; } @placeholder { ... }"]
1953+
end
1954+
```
1955+
1956+
### 2.1 Standalone Components Deep Dive
18681957

18691958
### Components
18701959

@@ -5297,7 +5386,17 @@ Example:
52975386

52985387
[Back to top⤴️](#table-of-contents)
52995388

5300-
## Signals
5389+
## 3. Stage 3: Modern Signals Reactivity & State Management
5390+
5391+
```mermaid
5392+
flowchart LR
5393+
SourceSignal["signal(value) (State Node)"] --> ComputedSignal["computed(() => fn()) (Derived Node)"]
5394+
ComputedSignal --> EffectNode["effect(() => sideEffect()) (Consumer Node)"]
5395+
SourceSignal --> TemplateView["Template View Binding (Reactive UI)"]
5396+
Note over SourceSignal,EffectNode: Fine-grained tracking: only dependent nodes re-evaluate!
5397+
```
5398+
5399+
### 3.1 Signals Internals & Reactive Primitives
53015400

53025401
### Signals Introduction
53035402

@@ -7022,7 +7121,17 @@ export class LiveSearchComponent {
70227121
- **Signals**: Best for synchronous state management, template bindings, and local reactivity.
70237122
- **RxJS**: Best for asynchronous operations, event streams, timers, HTTP calls, and complex data flows.
70247123

7025-
## Dependency Injection
7124+
## 4. Stage 4: Hierarchical Dependency Injection & Routing
7125+
7126+
```mermaid
7127+
flowchart TD
7128+
PlatformInj["Platform Injector"] --> RootInj["Root EnvironmentInjector (provideIn: 'root')"]
7129+
RootInj --> RouteInj["Route / Environment Injector (Lazy Route Providers)"]
7130+
RouteInj --> ElementInj["Element Injector (Component @Component providers)"]
7131+
ElementInj --> DirectiveInj["Directive Injector"]
7132+
```
7133+
7134+
### 4.1 Dependency Injection Architecture
70267135

70277136
### Dependency Injection
70287137

@@ -8590,7 +8699,9 @@ export class AuthGuard implements CanLoad {
85908699

85918700
With `withComponentInputBinding()` enabled, Angular can automatically bind route parameters directly to component inputs (including Signal inputs).
85928701

8593-
## Forms
8702+
## 5. Stage 5: Enterprise Reactive Forms & HTTP Client
8703+
8704+
### 5.1 Reactive Forms Architecture
85948705

85958706
### Forms Introduction
85968707

@@ -12878,7 +12989,9 @@ Deferrable views can be used in component template to defer the loading of selec
1287812989
}
1287912990
```
1288012991

12881-
## Server-Side Rendering (SSR)
12992+
## 6. Stage 6: Server-Side Rendering (SSR), Deferrable Views & Performance
12993+
12994+
### 6.1 Server-Side Rendering & Hydration
1288212995

1288312996
### SSR Introduction
1288412997

@@ -17348,7 +17461,9 @@ Abstract data storage access routines from component consumers.
1734817461

1734917462
Delegate dependency resolution tasks dynamically using Angular's DI systems.
1735017463

17351-
## Interview Questions
17464+
## 7. Stage 7: Staff Angular Architect Interview Handbook & Cheatsheet
17465+
17466+
### 7.1 40 Core Staff Architect Technical Interview Q&As
1735217467

1735317468
### Angular Interview Questions
1735417469

0 commit comments

Comments
 (0)