290 lines
6.9 KiB
Markdown
290 lines
6.9 KiB
Markdown
# /explore - Discover Angular Agents
|
|
|
|
## Meet Your 7 Specialized Agents
|
|
|
|
Each agent is an expert in their domain, ready to guide you through every aspect of Angular development.
|
|
|
|
---
|
|
|
|
## 🎯 Agent 1: TypeScript Fundamentals
|
|
|
|
**Specialty**: TypeScript, Type System, OOP, Decorators
|
|
|
|
**Expert In**:
|
|
- Basic and advanced TypeScript types
|
|
- Object-oriented programming concepts
|
|
- Generic types and constraints
|
|
- Decorators and metadata reflection
|
|
- Async/await and Promise handling
|
|
- Modern JavaScript features
|
|
|
|
**When to Use**:
|
|
- Learning TypeScript from scratch
|
|
- Understanding complex type definitions
|
|
- Writing type-safe code
|
|
- Mastering advanced features
|
|
|
|
**Key Skills**:
|
|
- ✅ typescript-mastery
|
|
- Advanced type patterns
|
|
- Type narrowing and guards
|
|
- Conditional and mapped types
|
|
|
|
**Prerequisites**: JavaScript fundamentals
|
|
|
|
**Learning Estimate**: 20-30 hours
|
|
|
|
---
|
|
|
|
## 🏗️ Agent 2: Angular Core Architecture
|
|
|
|
**Specialty**: Components, Services, DI, Modules, Lifecycle
|
|
|
|
**Expert In**:
|
|
- Component creation and lifecycle
|
|
- Service design and patterns
|
|
- Dependency injection system
|
|
- Angular modules and feature modules
|
|
- Templates and data binding
|
|
- Built-in and custom directives
|
|
|
|
**When to Use**:
|
|
- Building Angular components
|
|
- Designing service architecture
|
|
- Understanding Angular's DI system
|
|
- Learning lifecycle hooks
|
|
|
|
**Key Skills**:
|
|
- ✅ angular-core-patterns
|
|
- Component communication
|
|
- Template syntax
|
|
- Directive creation
|
|
|
|
**Prerequisites**: TypeScript fundamentals
|
|
|
|
**Learning Estimate**: 25-35 hours
|
|
|
|
---
|
|
|
|
## ⚡ Agent 3: Reactive Programming & RxJS
|
|
|
|
**Specialty**: Observables, Subjects, Operators, Reactive Patterns
|
|
|
|
**Expert In**:
|
|
- Observable creation and subscription
|
|
- Subject types and use cases
|
|
- RxJS operators (map, filter, switchMap, etc.)
|
|
- Higher-order observables
|
|
- Memory leak prevention
|
|
- Error handling in streams
|
|
- Testing Observables
|
|
|
|
**When to Use**:
|
|
- Working with async data streams
|
|
- Implementing reactive patterns
|
|
- Managing subscriptions
|
|
- Testing Observable-based code
|
|
|
|
**Key Skills**:
|
|
- ✅ rxjs-mastery
|
|
- Operator composition
|
|
- Stream combination strategies
|
|
- Subscription management
|
|
|
|
**Prerequisites**: Angular Core concepts
|
|
|
|
**Learning Estimate**: 25-35 hours
|
|
|
|
---
|
|
|
|
## 📝 Agent 4: Forms, Validation & Directives
|
|
|
|
**Specialty**: Reactive/Template Forms, Validation, Custom Directives
|
|
|
|
**Expert In**:
|
|
- Reactive forms (FormControl, FormGroup, FormArray)
|
|
- Template-driven forms
|
|
- Form validation (built-in and custom)
|
|
- Async validators
|
|
- Custom directives
|
|
- Form accessibility
|
|
- Advanced form patterns
|
|
|
|
**When to Use**:
|
|
- Building any type of form
|
|
- Implementing complex validation
|
|
- Creating reusable form components
|
|
- Building custom directives
|
|
|
|
**Key Skills**:
|
|
- ✅ angular-forms
|
|
- Form state management
|
|
- Cross-field validation
|
|
- Dynamic form generation
|
|
|
|
**Prerequisites**: Angular Core, RxJS basics
|
|
|
|
**Learning Estimate**: 20-25 hours
|
|
|
|
---
|
|
|
|
## 🛣️ Agent 5: Routing, Performance & Advanced Patterns
|
|
|
|
**Specialty**: Routing, Lazy Loading, Performance, Angular Signals
|
|
|
|
**Expert In**:
|
|
- Route configuration and navigation
|
|
- Lazy loading and code splitting
|
|
- Route guards (CanActivate, CanDeactivate, Resolve)
|
|
- Change detection optimization
|
|
- Performance metrics and optimization
|
|
- Angular Signals and new reactivity model
|
|
- Micro-frontend architecture
|
|
|
|
**When to Use**:
|
|
- Designing application routing architecture
|
|
- Implementing lazy loading
|
|
- Optimizing bundle size and performance
|
|
- Building large-scale applications
|
|
- Understanding change detection
|
|
|
|
**Key Skills**:
|
|
- ✅ angular-routing (Performance)
|
|
- Preloading strategies
|
|
- Route caching patterns
|
|
- Bundle analysis
|
|
|
|
**Prerequisites**: Angular Core, Routing basics
|
|
|
|
**Learning Estimate**: 20-25 hours
|
|
|
|
---
|
|
|
|
## 🗄️ Agent 6: State Management & APIs
|
|
|
|
**Specialty**: NgRx, Akita, Services, Angular Signals, HTTP Integration
|
|
|
|
**Expert In**:
|
|
- Store architecture and patterns
|
|
- Actions, reducers, selectors
|
|
- Effects and side effects
|
|
- Entity adapters
|
|
- Facade pattern
|
|
- HTTP integration and caching
|
|
- Angular Signals for state
|
|
- API request handling
|
|
|
|
**When to Use**:
|
|
- Managing complex application state
|
|
- Sharing state between components
|
|
- Implementing time-travel debugging
|
|
- Normalizing API responses
|
|
- Preventing race conditions
|
|
|
|
**Key Skills**:
|
|
- ✅ state-management-advanced
|
|
- Entity patterns
|
|
- Selector composition
|
|
- API integration patterns
|
|
|
|
**Prerequisites**: Angular Core, RxJS mastery
|
|
|
|
**Learning Estimate**: 30-40 hours
|
|
|
|
---
|
|
|
|
## 🧪 Agent 7: Testing, Build & Deployment
|
|
|
|
**Specialty**: Unit/E2E Testing, Build Optimization, CI/CD, DevOps
|
|
|
|
**Expert In**:
|
|
- Unit testing with Jasmine and TestBed
|
|
- E2E testing with Cypress and Playwright
|
|
- Test coverage and strategies
|
|
- Service mocking and HTTP testing
|
|
- Build optimization (AOT, tree-shaking)
|
|
- Bundle analysis
|
|
- CI/CD pipelines (GitHub Actions, etc.)
|
|
- Deployment to various platforms
|
|
- Monitoring and error tracking
|
|
- Performance monitoring
|
|
|
|
**When to Use**:
|
|
- Writing tests for components and services
|
|
- Setting up end-to-end testing
|
|
- Optimizing production builds
|
|
- Setting up CI/CD pipelines
|
|
- Deploying to production
|
|
- Monitoring application health
|
|
|
|
**Key Skills**:
|
|
- ✅ angular-testing-deployment
|
|
- Test patterns and strategies
|
|
- Deployment best practices
|
|
- Performance monitoring
|
|
|
|
**Prerequisites**: All other agents' concepts
|
|
|
|
**Learning Estimate**: 35-50 hours
|
|
|
|
---
|
|
|
|
## 🎓 Agent Collaboration
|
|
|
|
Agents often work together:
|
|
|
|
```
|
|
TypeScript Fundamentals
|
|
↓
|
|
Angular Core Architecture
|
|
↓
|
|
┌───┴────────────────────┐
|
|
↓ ↓
|
|
RxJS Mastery Forms & Validation
|
|
↓ ↓
|
|
└───┬────────────────────┘
|
|
↓
|
|
Routing & Performance
|
|
↓
|
|
State Management & APIs
|
|
↓
|
|
Testing, Build & Deployment
|
|
```
|
|
|
|
## Quick Assessment
|
|
|
|
Answer these questions to see which agent can help you most:
|
|
|
|
1. **Do you need TypeScript help?** → Agent 1
|
|
2. **Building components/services?** → Agent 2
|
|
3. **Working with async data?** → Agent 3
|
|
4. **Creating forms?** → Agent 4
|
|
5. **Scaling application?** → Agent 5
|
|
6. **Managing state?** → Agent 6
|
|
7. **Testing/deploying?** → Agent 7
|
|
|
|
## Learning Hours by Agent
|
|
|
|
| Agent | Hours | Difficulty |
|
|
|-------|-------|-----------|
|
|
| TypeScript Fundamentals | 20-30h | Beginner |
|
|
| Angular Core | 25-35h | Beginner |
|
|
| RxJS Mastery | 25-35h | Intermediate |
|
|
| Forms & Validation | 15-20h | Intermediate |
|
|
| Routing & Performance | 20-25h | Intermediate |
|
|
| State Management | 30-40h | Advanced |
|
|
| Testing & Deployment | 35-50h | Advanced |
|
|
| **Total** | **170-235h** | **Mixed** |
|
|
|
|
## Next Steps
|
|
|
|
1. **Start with `/learn`** to choose a learning path
|
|
2. **Deep dive** into specific agents here
|
|
3. **Use `/projects`** for hands-on practice
|
|
4. **Use `/assess`** to test your knowledge
|
|
5. **Ask agents directly** for detailed guidance
|
|
|
|
---
|
|
|
|
**Ready to Master Angular?** Start with your first agent! 🚀
|