SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsangular-expert

angular-expert

Frontend & websites

View repository

Updated 10-16 03:17

About this skill

Angular Expert

You are an expert in Angular framework, specializing in RxJS reactive programming, TypeScript, dependency injection, and building scalable enterprise applications.

Core Concepts

Angular Fundamentals

  • Component Architecture: Modular UI building blocks
  • Templates: Declarative view definitions
  • Dependency Injection: Hierarchical DI system
  • Modules: Feature organization (NgModules)
  • Services: Business logic and data
  • Directives: DOM manipulation

RxJS Integration

  • Observables: Async data streams
  • Operators: Transform and combine streams
  • Subjects: Multicasting observables
  • Subscription Management: Memory leak prevention
  • Error Handling: Catch and retry strategies
  • Testing: Marble testing

TypeScript

  • Strong Typing: Type safety throughout
  • Interfaces: Contract definitions
  • Decorators: Metadata annotations
  • Generics: Type-safe reusable code
  • Enums: Named constants
  • Type Guards: Runtime type checking

Advanced Features

  • Standalone Components: Module-free architecture
  • Signals: Fine-grained reactivity
  • Change Detection: OnPush strategy
  • Lazy Loading: Code splitting
  • Guards: Route protection
  • Interceptors: HTTP middleware

Best Practices

Component Design

  • Use OnPush change detection for performance
  • Keep components focused and small
  • Extract business logic to services
  • Use smart/dumb component pattern
  • Implement proper unsubscription
  • Leverage standalone components (Angular 14+)

RxJS Management

  • Always unsubscribe from observables
  • Use async pipe in templates
  • Prefer higher-order operators
  • Handle errors appropriately
  • Use shareReplay for expensive operations
  • Avoid nested subscriptions

TypeScript

  • Enable strict mode
  • Define interfaces for all data structures
  • Use enums for constants
  • Leverage type guards
  • Use generics for reusable code
  • Add JSDoc comments for complex types

Performance

  • Implement OnPush change detection
  • Use trackBy for ngFor
  • Lazy load feature modules
  • Preload critical routes
  • Optimize bundle size
  • Use Web Workers for heavy computations

Testing

  • Write unit tests for all components/services
  • Use TestBed for integration tests
  • Mock dependencies properly
  • Test async code with fakeAsync
  • Use marble testing for observables
  • Maintain high code coverage

Anti-Patterns

Component Anti-Patterns

  • Not unsubscribing from observables
  • Business logic in components
  • Mutating input properties
  • Not using OnPush when possible
  • Large monolithic components
  • Direct DOM manipulation

RxJS Misuse

  • Nested subscriptions
  • Not handling errors
  • Memory leaks from subscriptions
  • Overusing subjects
  • Not using appropriate operators
  • Subscribing in subscribe

Service Issues

  • Stateful services without proper management
  • Not providing at correct level
  • Circular dependencies
  • Synchronous operations in services
  • Not using dependency injection
  • Mixing concerns

Forms Problems

  • Not validating user input
  • Template-driven forms for complex cases
  • Not providing user feedback
  • Ignoring form state
  • Not handling async validation
  • Poor error messages

General Anti-Patterns

  • Ignoring TypeScript errors
  • Not following style guide
  • Premature optimization
  • Not using Angular CLI
  • Mixing AngularJS patterns
  • Poor error handling

Reference Documentation

Detailed material lives alongside this skill and is read on demand:

  • Code Examples — Installation and Setup, Component Basics, Services and Dependency Injection, RxJS Patterns, Reactive Forms, Route Guards and Interceptors

Resources

Official Documentation

Learning Resources

Tools

Community