Comment appeler une fonction sur un événement click avec Angular ?
Avec le framework Angular, il est possible de développer entièrement son application web ou son site internet, sans faire appel à d'autres outils ou d'autres langages. Le framework applique pour cela le modèle MVC. Le contrôleur envoie les informations à la vue qui les affiche. C'est en utilisant cette relation que l'on peut appeler une fonction lors d'un clic sur un élément. La notation est cependant différente entre AngularJS, la toute première version du framework et les versions suivantes.
Si vous utilisez la version 2 du framework Angular ou une version plus récente, vous devez indiquer le template contenant vos éléments HTML avec la directive "@component" dans votre contrôleur. Vous devez également dans votre classe instancier la fonction qui sera appelée lors du clic.
import { Component, OnInit } from "@angular/core";
@Component({
templateUrl:"monBouton.html" //Fichier HTML contenant le bouton
})
export class App implements OnInit{
//Constructeur
constructor(){}
//Fonction appelée lors de l'initialisation du contrôleur
ngOnInit(){
}
//Fonction appelée lors du clic
clicSurBouton(){
alert("Vous venez de cliquer sur le bouton");
}
}
Dans votre template, vous devez utiliser l'évènement en l'indiquant entre des parenthèses : (click). Il s'agit du même type de notation pour tous les évènements dans Angular. Le reste de l'écriture est identique au code HTML classique pour un clic sur un bouton.
<button (click)="clicSurBouton()"></button>
Si vous utilisez la première version du framework, nommé AngularJS, l'écriture est différente. Dans le contrôleur, votre fonction doit être codée dans la fonction "app.controler()". Il s'agit d'un attribut de la variable "$scope", un élément essentiel d'une application AngularJS.
app.controller('monControleur', ['$scope', function($cope) {
$scope.clicSurBouton= {
alert("Vous venez de cliquer sur le bouton");
};
}]);
Dans votre template HTML, vous devez utiliser un évènement spécifique au framework pour appeler la fonction. Il s'agit de l'évènement "ng-click". Dans AngularJS, tous les évènements des éléments HTML sont précédés de la notation "ng-".
<button ng-click="clicSurBouton()"></button>