AngularJS : les modules

Dans AngularJS, les modules permettent d'encapsuler les différents éléments de notre application à savoir les contrôleurs, les vues et les modèles. En terme clair, disons que le module contient les différentes parties d'une application et vous permet de structurer celle-ci. En fonction de la complexité de votre application, elle peut avoir un seul ou plusieurs modules.
Par ailleurs, en toute logique l'application en elle même est un module à l'intérieur duquel on trouve les autres éléments

Créer un module

Pour créer un module dans AngularJS, on utilise la méthode module de l'objet angular tout simplement :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <head>
    <body ng-app="myApp">        
        <script>
            var myApp = angular.module("myApp", []); 
        </script>
    </body>
</html>

C'est cette ligne qui crée le module : var myApp = angular.module("myApp", []);
On crée le module en faisant angular.module("myApp", []); et on le stocke dans la variable myApp. Notons que myApp est le nom donné à notre application avec la directive ng-app et qu'il est très important de créer le module qui fait référence à l'élément qui constitue notre application. Ceci indique à AngularJS que c'est le module principal. Le nom myApp peut être remplacé par n'importe quel nom que vous désirez. 

Le paramètre tableau ([]) permet, s'il y'a lieu, de lister les modules dont dépend myApp.
Si ce paramètre est manquant, un nouveau module n'est pas créé mais vous récupérez le module du même nom existant

On peut alors, en fonction de notre application, créer plusieurs modules: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <head>
    <body ng-app="myApp">        
        <script>
            var myApp = angular.module("myApp", []); 
            var facture = angular.module("facture", []);
        </script>
    </body>
</html>

Maintenant que le module est créé, on peut lui ajouter des directives, des contrôleurs, des filtres, etc. comme on peut le faire à n'importe quel module.

Généralement, les scripts javascript liés aux contrôleurs, modules et autres sont dans des fichiers js séparés mais dans nos exemples, nous allons mettre tout ça dans le même fichier html pour aller vite.

Ajouter un contrôleur

Pour ajouter un contrôleur au module, il suffit de faire ceci : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <head>
    <body ng-app="myApp">
        <div ng-controller="meteoControler">
            Aujourd'hui c'est {{ jour }} et il fait {{ temps }}
        </div>

        <script>
            var myApp = angular.module("myApp", []);
            myApp.controller("meteoControler", function($scope) {
                $scope.jour = "mercredi";
                $scope.temps = "beau temps";
            });
        </script>
    </body>
</html>

Cette phrase affichera : Aujourd'hui c'est mercredi et il fait beau temps
On verra plus tard en détail comment fonctionnent les contrôleurs et le paramètre $scope.

Ajouter une directive

Pour ajouter une directive : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <head>
    <body ng-app="myApp">
        <div ld-directive-personnelle></div>

        <script>
            var myApp = angular.module("myApp", []);
            myApp.directive("ldDirectivePersonnelle", function() {
                return {
                    template : "Contenu de ma directive personnelle"
                };
            });
        </script>
    </body>
</html>

Ma <div ld-directive-personnelle>  affichera Contenu de ma directive personnelle.
Un chapitre suivant sera consacré aux directives et on apprendra davantage. Par ailleurs, on peut juste noter qu'AngularJS fournit des directives intégrées.

Les modules permettent de regrouper les fonctions afin d'éviter des collisions surtout avec les fonctions globales javascript.

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .