💻 Développement

angular-guide

Développement d'applications Angular avec modules, composants, services, RxJS, routing et formulaires réactifs.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- angular-guide --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } angular-guide -Launch"

🚀 Déjà installé ?

claude "/angular-guide"

Ou tapez /angular-guide dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

AngularNgModuleRxJSAngular CLIcomposant Angularservice Angular

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/angular-guide ~/.claude/skills/

Source : dev-skills/angular-guide

📖 Manuel

Guide Angular

Workflow

  1. Analyser le besoin — Identifier le type d'application (dashboard, portail entreprise, PWA) et définir l'architecture : standalone components vs NgModules, stratégie de lazy loading, et choix de la gestion d'état (NgRx, signals, ou services simples).
  1. Structurer le projet — Organiser en feature modules avec Angular CLI : core/ pour les services singleton, shared/ pour les composants et pipes réutilisables, et un dossier par feature contenant composants, services, models et guards associés.
  1. Créer les composants — Développer les composants avec le décorateur @Component, utiliser les signals Angular pour l'état réactif (signal(), computed(), effect()), configurer changeDetection: OnPush pour les performances, et gérer les inputs/outputs typés.
  1. Implémenter les services et l'injection de dépendances — Créer les services avec @Injectable({ providedIn: 'root' }), utiliser le système d'injection hiérarchique d'Angular, et implémenter les interceptors HTTP pour l'authentification et la gestion des erreurs.
  1. Gérer les flux asynchrones avec RxJS — Utiliser les opérateurs RxJS essentiels (switchMap, mergeMap, combineLatest, debounceTime), gérer les souscriptions avec le pattern async pipe dans les templates, et éviter les memory leaks avec takeUntilDestroyed().
  1. Configurer le routing — Définir les routes avec lazy loading (loadComponent, loadChildren), implémenter les guards fonctionnels (canActivate, canMatch), les resolvers pour le pre-fetching, et les stratégies de preloading.
  1. Implémenter les formulaires — Utiliser les Reactive Forms avec FormBuilder, FormGroup et FormArray, créer des validateurs custom synchrones et asynchrones, et gérer l'affichage des erreurs de validation de manière centralisée.
  1. Tester et déployer — Écrire des tests unitaires avec Jasmine/Karma ou Jest, des tests d'intégration avec TestBed, configurer les environnements de build, et optimiser le bundle avec le tree-shaking et le build AOT.

Règles