Les 75 pages · tapez pour filtrer
01 Nouveautés d’Angular 21 & 22 Tous les changements importants de la v21 et de la v22, en bref, avec un lien vers la page qui explique chacun. Départ 01 Votre première application, pas à pas Une liste de lecture construite d’un composant vide jusqu’à une application terminée — signals, @for, inputs et outputs, un service et un formulaire, pas à pas. Départ 01 Décisions rapides « Où mettre ça ? », « Signal ou Observable ? », « Shared ou feature ? » — des réponses courtes aux questions de tous les jours. Départ 01 Questions d’entretien Angular 60 vraies questions d’entretien pour profils junior, confirmé et senior, avec la réponse à donner, la relance et les signaux d’alerte. Plus un entretien blanc. Départ 02 Standalone et bootstrap Comment une application démarre sans NgModule : bootstrapApplication, app.config.ts, imports dans le composant. Fondamentaux modernes 02 Data binding et événements Interpolation, bindings de propriétés et d’attributs, événements avec $event et filtres de touches, et comment [( )] est construit — ce qui entre dans le DOM et ce qui en revient. Fondamentaux modernes 02 Control Flow : @if, @for, @switch La syntaxe de blocs qui remplace *ngIf/*ngFor/ngSwitch, avec track, @empty et vérifications d’exhaustivité. Fondamentaux modernes 02 @let et les nouvelles expressions de template Variables locales avec @let, fonctions fléchées, spread, regex, instanceof, commentaires dans les balises. Fondamentaux modernes 02 @defer — Lazy Loading dans les templates Chargez les composants lourds uniquement quand c’est nécessaire : triggers, prefetch, placeholder, loading, error. Fondamentaux modernes 02 Bindings de classe et de style Pourquoi [class.x] et [style.x] ont remplacé ngClass et ngStyle (avec migration automatique depuis la v21). Fondamentaux modernes 02 Styles des composants et encapsulation :host, les trois modes d’encapsulation, les thèmes avec des variables CSS, et pourquoi ::ng-deep est un dernier recours. Fondamentaux modernes 02 Pipes : quand et comment Pipes pures vs impures, pipes personnalisées, et comment choisir entre une pipe, computed() et une méthode. Fondamentaux modernes 03 signal() et computed() Les primitives réactives : état modifiable, état dérivé, égalité, untracked et règles d’immutabilité. Signals et réactivité 03 effect() — quand OUI, quand NON Effets de bord synchronisés avec les Signals : localStorage, logs, API impératives. Et leurs pièges. Signals et réactivité 03 linkedSignal() — état dérivé modifiable Un signal qui se réinitialise quand sa source change, mais que vous pouvez aussi modifier à la main. Signals et réactivité 03 resource, rxResource, httpResource Des données asynchrones sous forme de Signals : status, value, error, reload, annulation automatique. Stable depuis la v22. Signals et réactivité 03 debounced() — signals différés La version « debounce » d’un signal, sans RxJS. Parfait pour la recherche. Signals et réactivité 03 Listes : rechercher, filtrer, trier, paginer Une chaîne de signals computed qui ne recalcule que ce qui a changé, avec les filtres dans l’URL pour qu’un lien rouvre la même vue. Signals et réactivité 03 Les Observables depuis zéro Ce qu’est un Observable, subscribe et unsubscribe, les opérateurs que vous utilisez chaque semaine, froid ou chaud — et quand un signal suffit. Signals et réactivité 03 Signals ↔ RxJS toSignal, toObservable, takeUntilDestroyed, outputFromObservable — et quand RxJS reste le bon choix. Signals et réactivité 04 input() et output() Les inputs comme Signals (required, transform, alias) et les outputs typés. Les données descendent, les événements remontent. Composants : communication 04 model() — binding bidirectionnel Le « banana-in-a-box » [( )] avec une seule API. Quand l’utiliser, et quand input + output est préférable. Composants : communication 04 viewChild et contentChild Les queries comme Signals : viewChild, viewChildren, contentChild, contentChildren, l’option read. Composants : communication 04 Lifecycle et DestroyRef Quels hooks comptent encore à l’ère des Signals, afterNextRender, DestroyRef et ngOnChanges typé. Composants : communication 04 Projection de contenu ng-content avec select, plusieurs slots, contenu par défaut et le piège de la projection conditionnelle. Composants : communication 04 ng-template et ngTemplateOutlet Les templates comme valeurs : les render props en Angular, contexte typé et personnalisation des composants. Composants : communication 05 Smart vs Dumb Container vs présentation : qui détient l’état, qui se contente d’afficher, et comment bien les séparer. Conception des composants 05 Composants génériques <T> Un DataTable<T> ou un Select<T> correctement typé, avec des templates pour les cellules. Conception des composants 05 Composants dynamiques NgComponentOutlet, createComponent avec inputBinding/outputBinding, et un tableau de bord construit à partir d’une configuration. Conception des composants 05 Directives et composition d’hôte Les directives d’attribut, les métadonnées host: {} et la Directive Composition API (hostDirectives). Conception des composants 05 Contrôles de formulaire personnalisés FormValueControl (Signal Forms) vs ControlValueAccessor : une notation par étoiles, dans les deux variantes. Conception des composants 05 Change Detection OnPush est la valeur par défaut depuis la v22, Zone.js a disparu depuis la v21. Ce qui déclenche le rendu et comment éviter les mauvaises surprises. Conception des composants 06 inject() et @Service() Le nouveau décorateur @Service() de la v22, inject() vs le constructeur, et le contexte d’injection. Dependency Injection 06 Providers et hiérarchie des injecteurs Root vs route vs composant, useClass/useValue/useFactory/useExisting, et les modificateurs optional/self/skipSelf. Dependency Injection 06 InjectionToken et provideX() Configuration typée, fonctions provideFeature(), makeEnvironmentProviders et initializers. Dependency Injection 06 injectAsync() — services en Lazy Loading Chargez un service lourd uniquement quand vous en avez besoin, avec prefetch à l’idle. Dependency Injection 07 Structure des dossiers core / shared / features, ce que contient chacun, et à quoi ressemble l’intérieur d’une feature. Architecture d’application 07 Shared vs feature Quand déplacer un composant dans shared et (surtout) quand NE PAS le faire. Une checklist concrète. Architecture d’application 07 Interfaces et modèles Interface en ligne ou fichier séparé ? DTO vs modèle de domaine, type vs interface, où les ranger. Architecture d’application 07 State Management avec les Signals Stores simples à base de Signals, facades, état local vs global, et quand NgRx devient nécessaire. Architecture d’application 07 Guide de style et nommage Les conventions officielles actuelles : noms de fichiers sans suffixes, protected, readonly, ordre des membres. Architecture d’application 07 Barrels, alias et frontières index.ts, alias de chemins, API publique d’une feature et règles de dépendances vérifiables automatiquement. Architecture d’application 07 Erreurs : @boundary et ErrorHandler Le nouveau bloc @boundary de la v22.2, l’ErrorHandler global, les erreurs HTTP et les erreurs de resource. Architecture d’application 08 Routing moderne et Lazy Loading loadComponent, routes enfants, paramètres comme inputs et héritage des paramètres (le nouveau comportement par défaut de la v22). Routing 08 Guards et resolvers canActivate, canMatch, canDeactivate et resolve sous forme de fonctions, avec redirections via UrlTree / RedirectCommand. Routing 09 Signal Forms — les bases Des formulaires bâtis sur les Signals : form(), [formField], validation par schéma. Stable depuis la v22. Formulaires 09 Signal Forms — avancé Validation personnalisée et inter-champs, async/HTTP avec debounce, listes dynamiques, désactivé/masqué, schémas réutilisables. Formulaires 09 Reactive Forms typés FormGroup typé, nonNullable, FormArray — et leur cohabitation avec les Signal Forms. Formulaires 10 HttpClient, interceptors et couche d’API HttpClient sans configuration (v21), Fetch par défaut (v22), interceptors fonctionnels et une couche d’API avec mapping des DTO. HTTP et données 11 Performance — une checklist Ce qui compte vraiment : OnPush + Signals, track, @defer, routes en Lazy Loading, images, bundles et Hydration. Qualité et performance 11 Tests avec Vitest Vitest est le runner par défaut depuis la v21. TestBed, composants avec Signals, services, HTTP et harnesses. Qualité et performance 11 DevTools : regarder dans votre application Chrome DevTools et Angular DevTools pas à pas : ce que montre chaque panneau, avec des exercices qui fonctionnent sur ce site. Qualité et performance 11 Angular Aria Des composants headless et accessibles que vous stylez comme vous voulez : tabs, accordion, menu, listbox... Qualité et performance 12 SSR, Prerendering et modes de rendu Quand rendre sur le serveur, quand au build et quand uniquement dans le navigateur : RenderMode par route, app.routes.server.ts et les coûts réels. SSR et Hydration 12 Hydration : event replay et incrémentale Comment le navigateur reprend le HTML du serveur sans le re-rendre : Hydration complète, event replay, @defer (hydrate on …) et erreurs de mismatch. SSR et Hydration 12 Code compatible serveur window n’existe pas sur le serveur : PLATFORM_ID, afterNextRender, DOCUMENT, TransferState, le cache HTTP et PendingTasks. SSR et Hydration 13 Micro frontends Quand découper une application en plusieurs déploiements vaut le coup, et quand c’est juste de la complexité : Native Federation, Module Federation, iframes, Web Components. Architecture à grande échelle 13 Web Components avec Angular Elements createCustomElement : un composant Angular utilisé comme balise HTML n’importe où, plus la communication entre applications via des événements et BroadcastChannel. Architecture à grande échelle 13 Monorepo, bibliothèques et frontières Un workspace avec plusieurs applications et bibliothèques : ng generate library, Nx, points d’entrée secondaires, publication et règles de dépendances. Architecture à grande échelle 13 Architecture hexagonale (ports et adapters) Un domaine sans Angular, des ports sous forme de classes abstraites et des adapters interchangeables : HTTP, localStorage ou en mémoire, sans toucher à l’UI. Architecture à grande échelle 14 Les Signals sous le capot Le graphe réactif : producteurs et consommateurs, push-pull, pourquoi computed est lazy et sans glitch, le problème du diamant et quand les effects s’exécutent. Réactivité avancée 14 RxJS avancé : opérateurs d’ordre supérieur switchMap, mergeMap, concatMap et exhaustMap sur un diagramme interactif, plus retry avec backoff, shareReplay et comment éviter les fuites. Réactivité avancée 14 NgRx SignalStore State Management à grande échelle sur les Signals : withState, withComputed, withMethods, rxMethod, entités et hooks — et quand un store simple suffit. Réactivité avancée 14 Machines à états avec les signals Fini les états impossibles : une machine typée sur des signals, avec transitions, gardes et un diagramme d’états en direct. Réactivité avancée 15 WebSockets : un temps réel qui résiste au réseau Un socket typé sous forme de signals : reconnexion avec backoff et jitter, heartbeat, file d’attente hors ligne et sécurité SSR. Temps réel et hors ligne 15 Mises à jour optimistes et rollback Une UI instantanée qui reste honnête : snapshot et rollback, réponses dans le désordre, clés d’idempotence. Temps réel et hors ligne 15 Offline-first : Service Worker et cache Le Service Worker d’Angular : stratégies de cache, annonce des nouvelles versions et file d’attente pour les modifications faites hors ligne. Temps réel et hors ligne 16 Web Workers Des calculs lourds sans bloquer l’UI : un vrai worker dans la page, l’échange de messages et quand ça n’en vaut pas la peine. UI avancée et performance 16 Listes géantes : virtual scroll 100 000 lignes sans latence : le virtual scroll du CDK, itemSize, trackBy et les alternatives (pagination, scroll infini). UI avancée et performance 16 Animations modernes et View Transitions animate.enter et animate.leave à la place de @angular/animations (déprécié), transitions CSS et View Transitions à la navigation. UI avancée et performance 16 Fuites mémoire : les trouver et les corriger Abonnements, timers et listeners qui survivent à leur composant — comment les repérer dans les DevTools et les fermer. UI avancée et performance 17 Sécurité : XSS, sanitisation et CSP Ce qu’Angular fait automatiquement contre le XSS, quand bypassSecurityTrust devient dangereux, plus la CSP avec nonce, Trusted Types et XSRF. Sécurité et internationalisation 17 Authentification : tokens et refresh Un interceptor qui ajoute le token, le renouvelle une seule fois sur une 401 et rejoue les requêtes en attente — plus où conserver le token. Sécurité et internationalisation 17 OAuth 2.1 et OpenID Connect avec PKCE Le flux authorization code avec PKCE, pas à pas : verifier et challenge, state et nonce, l’ID token, et pourquoi un BFF est plus sûr. Sécurité et internationalisation 17 Internationalisation (i18n) $localize, l’attribut i18n, ICU plural/select, un build par langue vs des traductions à l’exécution, et le formatage selon la locale. Sécurité et internationalisation ↑ ↓ naviguer↵ ouvriresc fermer