Comment développer en Angular ?

Installation

Pour commencer un nouveau projet Angular, il vous faudra installer le CLI Angular. Pour installer le CLI Angular, il vous faudra installer NodeJS avec les options par défaut. Une fois NodeJS installé, ouvrez un invit de commande Windows puis tapez la ligne suivante pour installer le CLI Angular :

npm install -g @angular/cli

Une fois l’installation terminée, vous pouvez à présent accéder au CLI Angular en commençant vos commandes par ng.

A présent, placez vous dans le dossier dans lequel vous souhaitez installer votre nouveau projet Angular à l’aide des commandes cd, ls et dir. Ensuite, tapez la commande suivante pour créer un nouveau projet Angular où {Nom de votre projet} est le nom que vous donnerai à votre projet :

ng new {Nom de votre projet}

Une fois l’installation terminée, utilisez la commande cd pour entrer dans le répertoire d’installation du projet Angular :

cd {Nom de votre projet}

Vous pouvez à présent lancer l’application Angular :

ng serve -o

L’option -o permet d’ouvrir votre navigateur par défaut à l’URL  http://localhost:4200 pour afficher votre application Angular. Vous devriez obtenir la page suivante :

Databinding

Interpolation

L’interpolation permet d’afficher la valeur d’une variable typescript sur une interface.

Exemple : affichage du prénom

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class Component implements OnInit {

  prenom: string;

  ngOnInit() {
    this.prenom = "Lucas";
  }
}
<p>Bienvenue {{prenom}}</p>

Property binding

Le property binding permet de modifier les propriétés d’un élément d’une interface.

Exemple : activer ou désactiver un bouton

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class Component implements OnInit {

  autoriserInscription: boolean;

  ngOnInit() {
    this.autoriserInscription = false;
  }
}
<button [disabled]="autoriserInscription">

Event binding

L’event binding permet de réaliser des actions lorsque l’utilisateur interagit avec l’interface.

Exemple : changer la valeur d’une variable au clic sur un bouton

<p>Bienvenue {{login}}</p>
<button (click)="changeLoginLibelle()">
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class Component implements OnInit {

  login: string;

  ngOnInit() {
    this.login = "Lucas";
  }

  changeLoginLibelle() {
    this.login = "Luluche";
  }

}

Two-way Data Binding

Le two-way data binding permet de répercuter les changements d’une variable sur l’interface dans le typescript et inversement.

Exemple : récupérer la valeur d’un input

<input type="text" [(ngModel)]="login">
<button (click)="afficherValeurInput()">
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})
export class Component implements OnInit {

  login: string;

  ngOnInit() {
    this.login = "Lucas"; // "Lucas" sera affichée dans l'input
  }

  afficherValeurInput() {
    console.log(this.login); // affichera ce que l'utilisateur a écrit dans l'input ("Lucas" si il n'a pas modifié)
  }

}

Références

Transmettre les valeurs des références locales

<input type="text" #inputNom>
<input type="text" #inputPrenom>
<button (click)="creerUtilisateur(inputNom.value, inputPrenom.value)">Ajouter utilisateur</button>
creerUtilisateur(inputNom: string, inputPrenom: string){
  this.utilisateurCree.emit({
    prenom: inputPrenom, 
    nom: inputNom
  });
}

Accéder aux références locales

<input type="text" #inputPrenom>
<input type="text" #inputNom>
<button (click)="creerUtilisateur()">Ajouter utilisateur</button>
@ViewChild('inputPrenom', {static: true}) inputPrenom: ElementRef; 
@ViewChild('inputNom', {static: true}) inputNom: ElementRef; 
creerUtilisateur(){
    this.utilisateurCree.emit({
      prenom: this.inputPrenom.nativeElement.value, 
      nom: this.inputNom.nativeElement.value
    });
}

Attribute Directives

Ne modifie pas la vue, c’est à dire le DOM. Modifie uniquement les propriétés des éléments. Par exemple la couleur avec backgroundColor. Elles peuvent être combinées sur un même élément.

ngStyle

<p [ngStyle]="{color: getCouleurTexte()}">{{ validiteCompte }}</p>
getColor(){
  return this.validiteCompte === 'invalide' ? 'red' : 'green';
}

ngClass

.compteValide {
    color: green;
}
<p [ngClass]="{compteValide: validiteCompte === 'valide'}">Votre compte a été créé</p>

Structural Directives

Modifie la vue, c’est à dire la structure du DOM. Ces directives sont préfixées par une étoile. Elles ne peuvent pas être combinées sur un même élément.

ngIf else

<p *ngIf="validiteCompte === 'valide' ; else compteInvalide">Votre compte a été créé</p>
<ng-template #compteInvalide>
    <p>Informations invalides</p>
</ng-template>

ngFor

utilisateurs = [{pseudo: 'Luluche'}, {pseudo: 'Boubou'}];
<p *ngFor="let utilisateur of utilisateurs">{{ utilisateur.pseudo }}</p>

ngSwitch

<div [ngSwitch]="value">
  <p *ngSwitchCase="5">Value is 5</p>
  <p *ngSwitchCase="10">Value is 10</p>
  <p *ngSwitchDefault>Value is Default</p>
</div>

Cycle de vie des composants

ngOnInit

Appelé une fois que le composant est initialisé juste après l’exécution du constructeur.

ngDoCheck

Appelé à chaque fois que Angular vérifie si des modifications ont été apportées. Par exemple, un clic sur un bouton qui ne change rien. N’est pas coûteux en terme de performance.

ngOnChanges

Appelé à chaque fois que la valeur d’une variable Input() est modifiée et permet notamment de récupérer la nouvelle et l’ancienne valeur.

@Input() prenom: string;
ngOnChanges(changes: SimpleChanges) {
  console.log(changes) --> affichera la nouvelle et l'ancienne valeur de prenom
}

ngAfterContentInit

Appelé à chaque fois que le contenu du ng-content est initialisé.

ngAfterContentChecked

Appelé à chaque fois que le contenu du ng-content est vérifié. Juste après l’initialisation (ngAfterContentInit) et après chaque détection de changement (ngDoCheck).

ngAfterViewInit

Appelé après que la vue du composant et celles de ses composants fils ont étés initialisés. Appelé généralement après l’initialisation (ngAfterContentInit) et la vérification (ngAfterContentChecked) du ng-content. A partir de cette étape, les éléments de la vue sont accessibles.

ngAfterViewChecked

Appelé à chaque fois que la vue du composant et celles de ses composants fils ont étés vérifiés. Après la vérification (ngAfterContentChecked) du ng-content.

ngOnDestroy

Appelé une fois que le composant va être détruit.

Interactions entre composants

Du composant parent au composant fils

@Component({
  selector: 'app-child',
  template: `
    <p>L'utilisateur {{utilisateur.prenom}} {{utilisateur.nom}} est connecté.</p>
  `
})
class ChildComponent {
  @Input() utilisateur: {prenom: string, nom: string};
}
@Component({
  selector: 'app-parent',
  template: `
    <app-child *ngFor="let utilisateurConnecte of utilisateursConnectes" [utilisateur]="utilisateurConnecte"></app-child>
`
export class ParentComponent {
  utilisateursConnectes = [
    {prenom: 'Lucas', nom: 'UZAN'},
    {prenom: 'Dark', nom: 'VADOR'},
    {prenom: 'Obiwan', nom: 'KENOBI'}
  ];
}

Du composant fils au composant parent

@Component({
  selector: 'app-child',
  template: `
    <input type="text" #inputNom>
    <input type="text" #inputPrenom>
    <button (click)="creerUtilisateur(inputNom, inputPrenom)">Ajouter utilisateur</button>
  `
})
class ChildComponent {
  @Output() utilisateurCree = new EventEmitter<{prenom: string, nom: string}>();
  creerUtilisateur(inputNom: HTMLInputElement, inputPrenom: HTMLInputElement){
    this.utilisateurCree.emit({prenom: inputPrenom.value, nom: inputNom.value});
  }
}
@Component({
  selector: 'app-parent',
  template: `
    <app-child (utilisateurCree)="getUtilisateurCree($event)"></app-child>
  `
export class ParentComponent {
  getUtilisateurCree(utilisateur: {prenom: string, nom: string}){
    console.log(utilisateur.prenom + ' ' + utilisateur.nom);
  }
}

Du composant fils à un composant frère en passant par le composant parent

@Component({
  selector: 'app-child',
  template: `
    <button (click)="clickButton()"></button>
  `
})
class ChildComponent {
  @Output() eventFired = new EventEmitter<number>();
  clickButton(){
    this.eventFired.emit(10000);
  }
}
@Component({
  selector: 'app-parent',
  template: `
    <app-child (eventFired)="onEventFired($event)"></app-child>
    <app-brother [variable]="myVariable"></app-brother>
  `
export class ParentComponent {
  myVariable: number;
  onEventFired(firedVariable: number){
    this.myVariable = firedVariable;
  }
}
@Component({
  selector: 'app-brother',
  template: `
    <p>{{ variable }}</p>
  `
})
class BrotherComponent {
  @Input() variable: number;
}

De n’importe quel composant à n’importe quel autre

export class SharedService {
  updateName = new EventEmitter<string>();
}
@Component({
  selector: 'app-component-a',
  template: `
    <input type="text" #inputNom>
    <button (click)="clickButton(inputNom.value)"></button>
  `
})
class ComponentA {
  constructor(private sharedService : SharedService){}

  clickButton(name: string){
    this.sharedService.updateName.emit(name);
  }
}
@Component({
  selector: 'app-component-b',
  template: `
    <p>{{ variable }}</p>
  `
})
class ComponentB {
  constructor(private sharedService : SharedService){
    this.sharedService.updateName.subscribe(
      (name: string) => alert('New name is ' + name)
    );
  }

  clickButton(name: string){
    this.sharedService.updateName.emit(name);
  }
}

Services

Partager une instance de service à tous les composants fils

export class CompteService {
  comptes = [];
  ajouterCompte(nom: string, prenom: string) {
    this.comptes.push({nom: nom, prenom: prenom});
  }
}
@Component({
  selector: 'app-child',
  template: `
    <button (click)="creerCompte()"></button>
  `
})
class ChildComponent {
  constructor(private compteService: CompteService){}

  creerCompte(){
    this.compteService.ajouterCompte('Lucas', 'UZAN');
  }
}
@Component({
  selector: 'app-parent',
  providers: [CompteService],
  template: `
    <app-child></app-child>
    <app-brother></app-brother>
  `
export class ParentComponent implements OnInit {
  constructor(private compteService: CompteService){}

  ngOnInit(){
    this.comptes = this.compteService.comptes;
  }
}

Sources

Leave a Comment