Le scope des templates de composant

Le scope a disparu à partir d’Angular 2, en tout cas dans le sens où on l’entendait avec AngularJS. Dans ces conditions, à quelles données un template de composant a-t-il accès ?

Qu’est-ce que le scope dans AngularJS ?

Dans AngularJS, le scope représentait le contexte d’évaluation d’un template, c’est-à-dire l’ensemble des propriétés et des méthodes auxquelles il avait accès.

Officiellement, le scope n’existe plus. Pourtant, les templates de composant Angular 2 et + possèdent bien un contexte d’évaluation. Que contient-il exactement ?

Scope dans Angular 2+ = Propriétés et méthodes publiques d’une classe de composant

À partir d’Angular 2, on pourrait dire que le “scope” d’un template est l’ensemble des propriétés et méthodes publiques de la classe du composant correspondant.

Prenons un exemple :

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

@Component({
  selector: 'meteo',
  template: `
    <p>Le temps est {{weather}}.</p>  <!-- OK -->
    
    <button (click)="refresh()">Actualiser</button>    <!-- OK -->
    
    <p>Il fait {{ api.getCelsius() }}°.</p>  <!-- OK -->

    <p>{{ user.name }}</p>      <!-- ERREUR, car `user` est private -->
  `
})
export class MeteoComponent {
  // Propriété publique
  weather = 'ensoleillé';

  // Propriété privée
  private user = {name: 'Vince'};

  // Syntaxe raccourcie  
  constructor(public api: Api) {}

  // Méthode publique
  refresh() {
    this.weather = 'pluvieux';
  }
}

Dans cet exemple, le “scope” serait composé de :

  • Propriétés publiques weather et api.
  • Méthode publique refresh().
Informations

Tags : templates

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne