AngularJS-Shield-large
AngularJS

AngularJS expliqué en patrons de conception, épisode 5 : Les Contrôleurs

Cet épisode est consacré aux patrons de conception traditionnels utilisés dans les contrôleurs en AngularJS.

Cet article fait partie d’une série d’articles consacrés à l’utilisation des patrons de conceptions par et dans les composants d’AngularJS.

Contrôleur de page

Un objet qui traite la requête d’une page ou une action. — Martin Fowler

Page Controller

D’après le point 4 un contrôleur de page est :

Le patron de conception Contrôleur de page, ou Page Controller, accepte une entrée depuis la requête, invoque l’action demandée d’un modèle, puis détermine la vue à utiliser pour la construction de la page finale.

Il peut exister une certaine hiérarchie au sein des contrôleurs de page, puisqu’une page peut être construite en assemblant plusieurs blocs, tels que les headers, les footers, les blocs d’informations de session, etc. Dans AngularJS, nous avons des contrôleurs, mais avec beaucoup moins de responsabilités. Ils ne traitent pas les requêtes des utilisateurs, c’est la responsabilité des services $router ou $state et le rendu de la page est à la charge des directives  ng-view ou ui-view.

De la même manière que les Contrôleurs de page, les contrôleurs d’AngularJS traite les interactions des utilisateurs, exposent et mettent à jour les modèles. Le modèle est exposé à la vue, lorsqu’il est attaché au $scope (ou bien au contexte “this”); et toutes les méthodes invoquées dans les vues — en réponse aux interactions de l’utilisateur — sont également attachées au $scope/contexte. Une autre similitude avec les Contrôleurs de page se situe au niveau de la hiérarchie qu’ils forment. Cette hiérarchie correspond à celle formée par la chaine des $scope. Ainsi, il est possible d’isoler des actions dans certains contrôleurs, ceux situés tout en haut de la chaîne.

Voici un exemple illustrant cette hiérarchie :

<!doctype html>
<html>
  <head>
  </head>
  <body ng-controller="MainController">
    <div ng-controller="ChildController">
      <span>{{user.name}}</span>
      <button ng-click="click()">Click</button>
    </div>
  </body>
</html>
function MainController($scope, $location, User) {
  if (!User.isAuthenticated()) {
    $location.path('/unauthenticated');
  }
}

function ChildController($scope, User) {
  $scope.click = function () {
    alert('Cliqué !');
  };
  $scope.user = User.get('123abc');
}

Cet exemple (à ne pas utiliser dans un code en production !) a pour but d’illustrer l’utilisation d’un contrôleur de base  MainController dans lequel nous isolons la logique qui sera utilisée par les sous-contrôleurs. Le contrôleur ChildController est responsable de gérer les actions de l’utilisateur telle que la gestion des clics sur le bouton, ainsi que d’exposer le modèle user à la vue en l’attachant au $scope.

Dans les prochains épisodes…

Dans le prochain et le dernier épisode, nous allons voir comment des patrons de conception tels que le Module Pattern ou l’Observer sont utilisés par AngularJS.

Standard