Angular Study Roadmap

Learn Angular after TypeScript. Focus on standalone components, dependency injection, RxJS-powered data flow, and routing.

1. Core focus areas

• Project setup: workspace layout, standalone components, environment configs, strict TS settings.
• Components & templates: inputs/outputs, change detection, pipes, directives, template-driven vs reactive forms.
• Dependency injection: providers, tokens, hierarchical injectors, testing strategies.
• Routing: lazy loading, route guards/resolvers, preloading, router data.
• State and data flow: RxJS streams, HttpClient patterns, error handling, caching, local state vs global stores.
• Testing: TestBed patterns, component harnesses, mocking HttpClient, harness-friendly architecture.

2. Fundamentals

• Angular Fundamentals

3. Performance (Advanced)

• Angular Performance Optimization

4. Design and responsiveness (Advanced)

• Responsive layouts: Use CSS grid/flex with container-aware components and consistent breakpoints.
• Design tokens: Share spacing, typography, and color tokens across components to prevent drift.
• Adaptive components: Plan for dense data tables, long strings, and empty/error states.
• Accessibility: Ensure focus states and semantic HTML remain intact across breakpoints.

5. Suggested sequence

1. Bootstrap a minimal standalone-component app with strict TS.
2. Build feature slices with routing, forms, and HttpClient integration.
3. Add RxJS patterns for state/data, then layer on testing.

6. Architecture extensions (Advanced)

• Micro frontends: See notes/shared/micro-frontends.md and map domain boundaries to Angular feature areas and routing shells.
• Scalable and responsive design: See notes/shared/scalable-responsive-design.md and use shared tokens in component styles.

7. Practice alignment

Create exercises under practice/angular/ that mirror notes (component inputs/outputs, routing scenarios, RxJS operators, DI testing).