174 lines
4.8 KiB
Markdown
174 lines
4.8 KiB
Markdown
# /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.
|