Utilisation d’un controller dans AngularJS

angularjs_logo

AngularJS est un framework MVW (Model View Whatever ).

Avec AngularJS, nous avons ce que l’on appelle le « controller », les « Providers », et les « Directives ». Mais, dans cet article, nous allons voir comment utiliser le « controller » dans angularJS. Nous allons également voir, comment lier un Provider (ou fournisseur ; nous utiliserons les « Services »)  à un contrôleur.

Comment utiliser le « controller »  dans angularJS?

La logique des vues est organisée dans le controller,  il faut donc que le code dans le controller soit simple, c’est-à-dire, ne pas utiliser le controller pour interagir avec le DOM et manipuler des données. Le rôle du controller est de définir des variables, ce que l’on appelle, les variables $scope, et d’encapsuler les vues liées à la logique.

Voici un exemple d’un controller :

// Le point d’entré de l’application
var app = angular.module('myApp', []) ;
// Déclaration de notre contrôleur
app.controller('myController', function($scope){
     $scope.sayHello = 'Hello Friends'; 
     $scope.sayDescription = 'Voici ma description, ceci est un bon contrôlleur';
}) ;
JS

<div ng-app="myApp" ng-controller="myController">
    <p>{{sayHello}}</p>
    <p>{{sayDescription}}</p>
</div>
HTML

Démo : http://jsfiddle.net/jbw5L68m/

L’utilisation de controller est-il obligatoire ? 

Dans cet exemple, l’utilisation d’un controller n’est pas obligatoire, puisqu'on affiche juste « Hello Friends » et la description. Nous pouvons déclarer ces variables $scope directement dans le HTML. Mais imaginez que nous avons une grande application à développer :  assigner les résultats d’une requête Ajax aux vues, deviendrait compliqué. Dans cette situation, le controller nous vient en aide.

De plus, si nous utilisons les Providers (services, factory, etc…), il n’y a pas moyen de communiquer à la vue sans le controller, car les Providers et le controller sont interdépendants. C'est un peu comme les membres qui ont besoin du cerveau pour réaliser une action. Ici, les membres sont les Providers car c'est dans ces providers (fournisseur) que nos actions se passent (requête Ajax, gestion d'évènement, ...), et le cerveau est le controller.

Nous pouvons donc en déduire que pour bien commencer avec angularJS, il est nécessaire d'utiliser les contrôleurs.

Comment lier un « Provider » à un « controller »

Il est vrai que dans le controller, on peut faire des requêtes Ajax, des gestions d’événement en javascript, etc... mais en faisant cela, la notion d'encapsulation serait perdue. C'est comme, avoir des membres sans avoir à les utiliser, et seulement utiliser le cerveau sans avoir recours aux membres. C'est bête!

Donc, au lieu de tout faire dans le controller, utilisons plutôt un Provider (ici nous allons utiliser le service provider) pour interagir avec le DOM ou appliquer des événements. Ensuite, nous assignerons des variables $scope dans le controller pour récupérer des résultats (Exemple : résultats d’une requête Ajax).

Souvenez-vous de ce qu’on a dit plus haut : le but du controller est d’encapsuler les vues liées à la logique.

// La point d’entrée de l’application
var app = angular.module('myApp', []) ;
// Déclaration de notre contrôleur
    // Donner acces au service via le controller
    app.controller('myController',['$scope', 'helloWorldService', function($scope, helloWorldService){
        // utilisisation des variables scopes pour interagir avec les views
        // et pour assigner le service dans le contrôleur
        $scope.sayHello = "cliquer ici pour saluer quelqu’un" ; 
        $scope.execSayHello = helloWorldService.sayHelloWorld();
    }]);
JS controller
app.service('helloWorldService', function(){
        this.helloWorld;
        this.sayHelloWorld = function () {
            var el = document.getElementById('el');
            el.addEventListener('click', function() {
                document.getElementById('result').innerText = "Hello world";
            }, false);
        }
    });
JS: Service Provider

<div ng-app="myApp" ng-controller="myController">
    <p id="el">{{sayHello}}</p>
    <p id="result"></p>
</div>
HTML

Voici le lien de l’exemple:  http://jsfiddle.net/b4v79015/

Dans cette exemple, nous voyons bien que le controller est le même, sauf sur la ligne 6 et la ligne 12.

Sur la ligne 6, nous voyons que le variable $scope et le helloWorldService, dans JS Provider, est déclaré dans un argument de type array, c’est une syntaxe à suivre. La raison est simple : cela permet au controller d'accéder au service du provider. Comme ça, la notion du MVW ne sera pas perdue.

Sur la ligne 12, notez que nous avons $scope.execSayHello qui a pour valeur la fonction sayHelloWorld du service provider.

Notez aussi, qu'au lieu d’exécuter un événement directement dans le contrôleur, nous avons utilisé un service pour exécuter les actions dont nous avons besoin dans l'application.

Et dans JS Provider, nous voyons bien que c'est là que l'action se passe, donc, si nous avons une requête Ajax sa place est dans ce fichier.

En conclusion, ne jamais faire quoi que ce soit sans le controller dans AngularJS.

Cet article touche à sa fin. Pour allez plus loin, je vous invite à lire ce tutoriel.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.