Controller as syntaxe dans AngularJS
Nous allons introduire la syntaxe controller as dans AngularJS avec des exemples.
Controller as Syntaxe dans AngularJS
Dans la version 1.1.5 d’AngularJS, la syntaxe Controller as a été introduite. Cela a un impact significatif sur la façon dont nous pensons à AngularJS.
Cela a été ajouté en tant que fonctionnalité expérimentale. Il s’agit d’une fonctionnalité essentielle qui nous aide à utiliser les fonctions du contrôleur plus rapidement et plus facilement.
Nous pouvons utiliser la syntaxe controller as pour appeler le contrôleur et accéder directement au contrôleur. Passons en revue un exemple et créons un nouveau contrôleur avec une fonction simple pour imprimer un nom.
Créons un nouveau projet dans AngularJS et passons en revue un exemple de syntaxe controller as. Dans un premier temps, nous allons ajouter la librairie AngularJS à l’aide de balises script.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Nous allons maintenant définir l’application AngularJS en utilisant ng-app.
<body ng-app="">
...
</body>
Nous allons créer un fichier script.js et créer un contrôleur. Ce contrôleur aura une fonction getName qui permettra de se connecter à la console, comme indiqué ci-dessous.
import angular from 'angular';
angular.module('app', []).controller('nameController', function() {
this.getName = function(){
console.log("Activated!")
}
});
Nous allons créer le frontend de notre application en index.html. Comme indiqué ci-dessous, nous allons créer un bouton qui appellera la fonction getName chaque fois qu’un utilisateur cliquera dessus.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="app" ng-cloak>
<div ng-controller="nameController as name">
<input type="button" value="Get Name" ng-click="name.getName()">
</div>
</body>
</html>
Production:
Sortie console :
L’exemple ci-dessus montre la syntaxe controller as, ce qui nous permet d’appeler facilement la fonction et de mémoriser le nom du contrôleur sous la forme d’un mot-clé ou d’un mot court pouvant être saisi facilement.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn