Formateur Angular

Formatez vos composants et services Angular TypeScript.

Angular TypeScript

Formatage

Options

Angular Formaté

Guide Angular

Architecture Angular

Angular est un framework complet avec une architecture opinionated. Composants, services, modules, pipes, directives : chaque concept a sa place. Le typage TypeScript strict et l'injection de dépendances rendent les grandes applications maintenables. Angular 17+ avec les signaux et le nouveau control flow simplifie beaucoup de patterns.

Concepts clés

@Component

Décorateur définissant selector, template, styles. Standalone components en Angular 17+.

@Injectable

Services injectables. providedIn: 'root' pour singleton global.

Signals

Réactivité fine grain. signal(), computed(), effect() pour un state management simplifié.

Control Flow

@if, @for, @switch : nouvelle syntaxe template en Angular 17+.

Style Guide Angular

  • Fichiers : Un fichier par classe. Nommage : user.component.ts, user.service.ts
  • Préfixes : Directive: appHighlight, composant: app-user-card
  • Services : Logique métier dans les services, pas les composants
  • Observables : Suffixe $ : users$, loading$. Pensez async pipe

Questions fréquentes

Standalone components vs NgModule : que choisir ?

Les standalone components sont le futur d'Angular (recommandé depuis v17). Ils éliminent le besoin de NgModule pour la plupart des cas. Les imports sont déclarés directement dans le composant. NgModule reste nécessaire pour certains cas avancés et la compatibilité.

Signals vs RxJS : quand utiliser quoi ?

Signals pour le state local des composants et les valeurs dérivées simples. RxJS pour les flux asynchrones complexes (HTTP, WebSockets, événements multiples). Les deux coexistent : toSignal() et toObservable() font le pont. La tendance est vers les Signals pour le state simple.

Comment organiser une grande application Angular ?

Structure par feature : chaque fonctionnalité dans son dossier avec composants, services, models. Shared/ pour les composants réutilisables. Core/ pour les services singleton. Lazy loading par route. Utilisez la structure proposée par Angular CLI et adaptez.

Quel formatter/linter pour Angular ?

ESLint avec @angular-eslint pour le linting. Prettier pour le formatage automatique. Angular Language Service dans VS Code pour l'autocomplétion des templates. ng lint vérifie le projet entier. Configurez husky pour le pre-commit formatting.