https://wiki.sgy.io/ 2026-05-12T15:16:21+00:00 https://wiki.sgy.io/ https://wiki.sgy.io/_media/wiki:logo.png text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:configuration?rev=1755361811&do=diff Configuration Créer une interface qui décrit la configuration souhaitée: export interface IAppConfig { api: { baseUrl: string; }; } Créer un service de configuration qui a deux méthodes, une pour charger le fichier de configuration et l'autre pour l'obtenir: text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:debug?rev=1755361811&do=diff Debug ng.probe Dans la console, un objet ng est disponible. Il permet de voir l'état de components et de services. Pour obtenir l'instance d'un component, on peut utiliser son sélecteur: ng.probe($('app-component-name')).componentInstance On peut aussi sélectionner le node dans Chrome DevTools, il sera alors référencé par text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:fundamentals?rev=1755361811&do=diff Angular Fundamentals Prend en compte la version 4/5 d'Angular. Démarrer un projet avec Angular CLI Setup: $ ng set defaults.styleExt scss ou bien: $ ng new my-new-app --style=scss Démarrer un projet qui s'appellera todo: $ ng new todo Cela crée un répertoire text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:ngrx?rev=1755361811&do=diff ngrx ngrx est une librairie qui permet de gérer l'état de l'application. C'est l'implémentation du pattern redux. Installation $ npm install @ngrx/core @ngrx/effects @ngrx/store @ngrx/store-devtools --save Introduction Composition de l'état par module text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:tests?rev=1755361811&do=diff Tests unitaires avec Jest Routing Component qui dépend de ActivatedRoute Erreur: Can't resolve all parameters for ActivatedRoute Ajouter dans providers: providers: [ { provide: ActivatedRoute, useValue: { params: of({id: 123}), }, }, ], text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:toc?rev=1755361811&do=diff Angular * Angular Fundamentals * Configuration * RxJS * ngrx * UI * Tests * Unit testing in Angular * Debug * [ Architecture Planning Template Example @DanWahlin] text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:ui?rev=1755361811&do=diff Angular Material yarn add @angular/material @angular/cdk yarn add @angular/animations text/html 2025-08-16T16:30:11+00:00 Anonymous (anonymous@undisclosed.example.com) https://wiki.sgy.io/web:javascript:angular:unittests?rev=1755361811&do=diff Unit testing in Angular * Demo app : <https://github.com/joeeames/PSAngularUnitTestingCourse> Testing Overview End to End * Live running application * Tests exercise live application * Automated * Validate application as a hole Unit testing * Single unit of code (often a class) Integration and functional testing