Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Controller As en Angular

Poster un commentaire

La syntaxe controller As est une nouvelle syntaxe qui offre une alternative à $scope depuis la version 1.2.0 d’Angular et permet de remplacer une construction Angular en code JavaScript un peu plus standard.

On va se faire la main sur un contrôleur très simple, celui du menu trouvé dans le projet de routage déjà présenté:

https://plnkr.co/edit/LjiLN6jT9fKso4nWkslC?p=info

On part de:

angular.module("app").controller('MainMenuController', mainMenuController);
 
function mainMenuController($scope, $location) {
      $scope.create = function() {
      $location.url('/creation');
   };
}

 

Un contrôleur c’est avant tout un objet, on ne devrait donc pas avoir besoin de lui injecter un service particulier, $scope, pour servir de scope. Il en a déjà un, c’est this!!!!

 

angular.module("app").controller('MainMenuController', mainMenuController);
 
function mainMenuController($location) {
   var vm = this;
 
   vm.create = function() {
      $location.url('/creation');
   };
}

 

Le problème de this est qu’il est contextuel. Le this à l’intérieur d’une méthode déclarée dans le contrôleur n’est plus le même que l’autre. Pour résoudre ce problème on se sert d’une variable de capture vm.

Jusque là la syntaxe est du JavaScript classique, c’est côté vue qu’Angular se rappelle à notre souvenir:


<nav class="navbar navbar-inverse" ng-controller="MainMenuController as vm">
<div class="container-fluid">
   <ul class="nav navbar-nav">
      <li>
         <a href="" ng-click="vm.create()">Créer</a>
      </li>
      <li>
         <a href="#/recherche">Rechercher</a>
      </li>
      <li>
         <a href="#/heavyLoading">Asynchrone</a>
      </li>
   </ul>
</div>
</nav>

 

Le contrôleur est introduit avec cette syntaxe qui s’appelle ‘Controller As’:


<ng-controller="MainMenuController as vm">

Lorsqu’Angular rencontre cette construction il sait qu’il doit instancier la classe MainMenuController dans la variable vm qui devient le contexte. Tout se passe comme si on avait écrit quelque part:


var vm = new MainMenuController();

La suite est évidente, la méthode create() est appelée ainsi:


ng-click="vm.create()"

J’ai repris vm comme dans le contrôleur, mais n’importe quel nom ferait l’affaire.

 

Ce que l’on peut apprécier avec cette nouvelle écriture est qu’il devient plus clair de savoir d’où sort create() ce qui est moins évident avec l’ancienne écriture flottante. Le bénéfice est surtout évident avec des contrôleurs imbriqués.

Comparez cet exemple extrait de cet article:

2016-04-27_00-30-19

A:

2016-04-27_00-31-32

Et au passage on évite l’usage des $parent qui peut donner des résultats pas toujours stables pour peu que le DOM se modifie.

On a tout de même besoin de $scope si on utilise des directives comme $watch, $apply ou $on. Ce n’est pas bien grave, car dans ce contexte $scope à un usage beaucoup plus normal: fournir un service utile et pas un service que le contrôleur a déjà.

 

Bibliographie

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s