Angular, one concept at a time

Each lesson adds one idea to this site and maps it to something you already know from React / Next.js, jQuery or MVC. The end goal: Angular driving GSAP and Three.js.

1. 00 Setup & how the app boots≈ create-next-app, layout.tsx, main.tsx
2. 01 Components & templates: {{ }}, [prop], (event)≈ JSX, jQuery .text() / .on()
3. 02 Control flow: @if, @for, @switch≈ &&, .map() with key, Razor @if
4. 03 Signals: signal, computed, effect≈ useState, useMemo, useEffect
5. 04 Inputs, outputs & ng-content≈ props, callbacks, children
6. 05 Services & dependency injection≈ context / custom hooks, MVC services
7. 06 Routing deeper: params, lazy loading, guards≈ app router, dynamic(), middleware
8. 07 HTTP & data loading≈ fetch / TanStack Query, $.ajax
9. 08 Forms≈ controlled inputs, MVC model binding
10. 09 Lifecycle & the DOM: viewChild, afterNextRender, DestroyRef≈ useRef, useEffect cleanup, $(document).ready
11. 10 Change detection, zone.js, OnPush, zoneless≈ React.memo; the big difference from React
12. 11 @defer & performance≈ lazy + Suspense, next/image
13. 12 SSR & hydration: server vs client rendering, incremental hydration≈ Next.js SSR / SSG vs a Vite SPA, Razor pages
14. 13 Angular-native animation (CSS, enter/leave)≈ Framer Motion AnimatePresence
15. 14 GSAP inside Angular≈ useGSAP
16. 15 Three.js inside Angular≈ react-three-fiber, by hand
17. 16 GSAP + Three.js together, scroll-drivenan immersive scroll-driven hero
18. 17 CMS blocks: a page builder≈ Sanity page builder, PortableText components map