Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste :
web:javascript:angular:fundamentals

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
web:javascript:angular:fundamentals [2018/04/01 03:17] – [Injection de Dépendance] sgariepyweb:javascript:angular:fundamentals [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
Ligne 6: Ligne 6:
  
 ====== Démarrer un projet avec Angular CLI ====== ====== 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'': Démarrer un projet qui s'appellera ''todo'':
Ligne 18: Ligne 27:
  
 On peut visiter l'application avec http://localhost:4200. On peut visiter l'application avec http://localhost:4200.
 +
 +
 +===== Utiliser SSL =====
 +
 +Dans package.json:
 +
 +  "start:ssl": "ng serve --port 8000 --hmr --ssl true --ssl-cert ssl/server.crt --ssl-key ssl/server.key"
 +
 +
 +
 +===== Librairie =====
 +
 +
 +  $ ng generate library
 +
 +
 +
  
 ===== Exécuter les tests ===== ===== Exécuter les tests =====
Ligne 260: Ligne 286:
 <h3>{{thumbnail.someProperty}}</h3> <h3>{{thumbnail.someProperty}}</h3>
 </code> </code>
 +
 +===== Titre =====
 +
 +Pour modifier le titre du navigateur par rapport à un composant, on peut utiliser ''Title''.
 +
 +<code javascript>
 +import { Title } from "@angular/platform-browser"@Component({
 +    ...
 +})
 +export class LoginComponent implements OnInit {
 +    constructor(private title: Title) {}    ngOnInit() {
 +        title.setTitle("Login")
 +    }
 +}
 +</code>
 +
  
 ===== Styliser un composant ===== ===== Styliser un composant =====
Ligne 518: Ligne 560:
 ===== Encapsuler une librairie tierce ===== ===== Encapsuler une librairie tierce =====
  
 +<note>Il y a une meilleure façon de faire, décrite dans la section **[[#injection_de_dependance|Injection de dépendances]]**.</note>
  
-Télécharger la librairie JavaScript tierce .  Dans cet exemple, on va utiliser ''toastr''.+Télécharger la librairie JavaScript tierce.  Dans cet exemple, on va utiliser ''toastr''.
  
   $ npm install toastr --save   $ npm install toastr --save
Ligne 685: Ligne 728:
 <a [routerLink]="['/events']">All Events</a> <a [routerLink]="['/events']">All Events</a>
 </code> </code>
 +
 +Pour passer des paramètres:
 +
 +
 +<code html>
 +<a [routerLink]="['/action']" [queryParams]="{someparam: '1'}">Action</a>
 +</code>
 +
 +Sinon, avec le ''router'' service:
 +
 +    this.router.navigate(['/product-list'], { queryParams: { page: pageNum } })
 +
 +
 +
 +
  
 ===== Naviguer par le code =====  ===== Naviguer par le code ===== 
Ligne 1261: Ligne 1319:
  
 Pour d'autres validators, voir [[https://angular.io/api/forms/Validators|Validators]] de la documentation d'Angular. Pour d'autres validators, voir [[https://angular.io/api/forms/Validators|Validators]] de la documentation d'Angular.
 +
 +
 +===== Ajout de validateurs =====
 +
 +
 +On peut ajouter des validateurs par programmation à un ''FormControl''.
 +
 +
 +    formControl.setValidators([Validators.required, Validators.maxLength(10)]);
 +    formControl.updateValueAndValidity();
 +
 +
 +Supprimer les validateurs:
 +
 +    formControl.clearValidators();
 +
  
  
Ligne 1570: Ligne 1644:
  
  
-Utilisant un token pour enregistrer le toastr, nous n'avons plus de classe, seulement une interface.  On ne peut donc pas l'injecter directement dans le constructeur comme c'était fait [[avant]].+Utilisant un token pour enregistrer le toastr, nous n'avons plus de classe, seulement une interface.  On ne peut donc pas l'injecter directement dans le constructeur comme c'était fait [[#encapsuler_une_librairie_tierce|avant]].
  
 Là où c'est utilisé, comme dans ''profile.component.ts'', on doit: Là où c'est utilisé, comme dans ''profile.component.ts'', on doit:
Ligne 1595: Ligne 1669:
   }   }
 </code> </code>
 +
 +
 +===== useClass =====
 +
 +Dans le provider, on utilise le raccourci :
 +
 +
 +<code javascript app.module.ts>
 +  providers: [
 +    AuthService,
 +</code>
 +
 +C'est l'équivalent de dire:
 +
 +<code javascript app.module.ts>
 +  providers: [
 +    {provide: AuthService, useClass: AuthService},
 +</code>
 +
 +On pourrait dire:
 +
 +<code javascript app.module.ts>
 +  providers: [
 +    {provide: AuthService, useClass: EventService},
 +</code>
 +
 +mais lorsqu'on injecte ''AuthService'', on aurait une instance de ''EventService''.
 +
 +
 +Il existe aussi ''useExisting'' et ''useFactory'', mais ce sont pour des cas très spécifiques.
 +
  
  
Ligne 1620: Ligne 1725:
   let emitter = new EventEmitter();   let emitter = new EventEmitter();
  
 +
 +
 +====== Débugger un component dans la console ======
 +
 +    ng.probe($0).componentInstance
 +
 +La référence ''$0'' étant le node du DOM sélectionné dans DevTools/Elements.
 +
 +
 +[[https://juristr.com/blog/2016/02/debugging-angular2-console/|Debugging Angular Applications from the Console]]
 +
 +
 +====== Tests unitaires ======
 +
 +AAA: Arrange, Act, Assert.
 +
 +
 +
 +===== Jasmine =====
 +
 +
 +  * ''describe()'':
 +  * ''beforeEach()'':
 +  * ''it()'':
 +  * ''expect()'':
 +
 +Matchers:
 +
 +  * ''toBe()''
 +  * ''toContain()''
 +  * ''toBeDefined()''
 +
 +
 +===== Karma =====
 +
 +  * Exécute les tests dans le navigateur.
 +  * Supporte pluisieurs navigateurs
 +  * Rapport d'exécution de tests
 +
 +===== Installation des dépendances =====
 +
 +  * npm i -g karma-cli
 +  * npm i karma karma-chrome-launcher karma-jasmine jasmine-core @types/jasmine -D
 +
 +
 +Ajouter le fichier ''karma-test-shim.js'' à la racine du projet.
 +
 +
 +karma.conf.js
 +
 +
 +
 +<code javascript voter.service.spec.ts>
 +import { VoterService } from './voter.service';
 +import { ISession } from '../shared/event.model';
 +import { Observable } from 'rxjs/Observable';
 +
 +describe('VoterService', () => {
 +  let voterService: VoterService;
 +  let mockHttp;
 +
 +  beforeEach(() => {
 +    mockHttp = jasmine.createSpyObj('mockHttp', ['delete', 'post']);
 +    voterService = new VoterService(mockHttp);
 +  });
 +
 +  describe('deleteVoter', () => {
 +    it('should remove the voter from the list of voters', () => {
 +      const session = { id: 6, voters: ['joe', 'john'] };
 +      
 +      mockHttp.delete.and.returnValue(Observable.of(false));
 +      
 +      voterService.deleteVoter(3, <ISession>session, 'joe');
 +      
 +      expect(session.voters.length).toBe(1);
 +      expect(session.voters[0]).toBe('john');
 +    });  
 +  });
 +});
 +</code>
  
  
web/javascript/angular/fundamentals.1522545465.txt.gz · Dernière modification : 2022/02/02 00:43 (modification externe)