# /learn - Angular Learning Paths

## Overview
Start your Angular learning journey with guided, structured learning paths tailored to your experience level and goals.

## Interactive Learning Paths

### Beginner Path (0-3 months)
Perfect for developers new to Angular who want to build a solid foundation.

**Phase 1: TypeScript Fundamentals** (Weeks 1-2)
- Basic types and interfaces
- OOP concepts
- Decorators (Essential for Angular)
- Async/await patterns
- **Agent**: TypeScript Fundamentals Agent
- **Estimated Hours**: 20-30 hours
- **Hands-on Projects**:
  - Build a TypeScript utility library
  - Create typed API client
  - Implement design patterns

**Phase 2: Angular Core Basics** (Weeks 3-4)
- Components and templates
- Services and dependency injection
- Basic routing
- Modules
- **Agent**: Angular Core Architecture Agent
- **Estimated Hours**: 25-35 hours
- **Hands-on Projects**:
  - Build a Todo application
  - Create a user dashboard
  - Multi-page application with routing

**Phase 3: Forms & Validation** (Weeks 5-6)
- Template-driven forms
- Form validation
- Custom validators
- **Agent**: Forms, Validation & Directives Agent
- **Estimated Hours**: 15-20 hours
- **Hands-on Projects**:
  - User registration form
  - Multi-step wizard
  - Dynamic form generation

**Milestone**: Your first production-ready Angular app with forms, routing, and services.

### Intermediate Path (3-6 months)
For developers comfortable with Angular basics wanting to master advanced concepts.

**Phase 4: Reactive Programming** (Weeks 7-8)
- RxJS fundamentals
- Observables and subjects
- Common operators
- Higher-order observables
- **Agent**: Reactive Programming & RxJS Agent
- **Estimated Hours**: 25-35 hours
- **Hands-on Projects**:
  - Real-time data streaming dashboard
  - Search with debouncing
  - Multi-source data combination

**Phase 5: Advanced Routing** (Weeks 9-10)
- Lazy loading
- Route guards
- Code splitting
- Change detection optimization
- **Agent**: Routing, Performance & Advanced Patterns Agent
- **Estimated Hours**: 20-25 hours
- **Hands-on Projects**:
  - Large-scale application with lazy-loaded modules
  - Role-based access control
  - Performance-optimized routing

**Phase 6: State Management** (Weeks 11-12)
- NgRx fundamentals
- Actions and reducers
- Selectors
- Effects
- **Agent**: State Management & APIs Agent
- **Estimated Hours**: 30-40 hours
- **Hands-on Projects**:
  - E-commerce cart system
  - Real-time notification system
  - Complex form state management

**Milestone**: Build a scalable application with proper state management and advanced routing.

### Advanced Path (6+ months)
Master enterprise patterns and optimization techniques.

**Phase 7: Testing & Performance** (Weeks 13-16)
- Unit testing with Jasmine
- E2E testing with Cypress
- Build optimization
- Deployment strategies
- **Agent**: Testing, Build & Deployment Agent
- **Estimated Hours**: 35-50 hours
- **Hands-on Projects**:
  - Fully tested component library
  - Production deployment pipeline
  - Performance-optimized PWA

**Phase 8: Advanced Patterns** (Weeks 17-20)
- Entity adapters
- Custom state selectors
- Micro frontends
- Angular Signals
- Akita patterns
- **Agents**: Multiple agents collaboration
- **Estimated Hours**: 40-60 hours
- **Hands-on Projects**:
  - Enterprise application with multiple features
  - Custom framework/library
  - Micro-frontend architecture

**Milestone**: Enterprise-ready Angular applications with comprehensive testing and optimization.

## Learning Tips

### Study Tips
1. **Code Along**: Don't just watch, write every example
2. **Practice Exercises**: Do the hands-on projects
3. **Build Real Apps**: Apply knowledge to real problems
4. **Code Review**: Study well-written Angular code
5. **Teach Others**: Explain concepts to reinforce learning

### Development Environment Setup
```bash
# Install Node.js 18+
node --version

# Install Angular CLI
npm install -g @angular/cli

# Create new project
ng new my-app
cd my-app
ng serve

# Generate components
ng generate component components/user-list
ng generate service services/user
ng generate module modules/shared
```

### Resources
- Official Documentation: https://angular.io
- Angular API Reference: https://angular.io/api
- Community Forum: https://gitter.im/angular/angular
- Stack Overflow: Tag: `angular`

## Assessment & Progress

After each phase, test your knowledge:
- Use `/assess` command to evaluate understanding
- Review weak areas and practice more
- Move to next phase when comfortable

## Next Steps

1. Choose your path based on experience level
2. Start with Phase 1 content
3. Complete hands-on projects
4. Move through phases sequentially
5. Use `/projects` to find practice challenges
6. Use `/explore` to dive deeper into topics

---

**Start Now**: Choose your path and begin learning! 🚀

Use `/explore` to see all 7 agents and their specialties.