docAngularJS TP 2: Modules et contrôleurs - e
download 
Plainte Transcription
AngularJS TP 2: Modules et contrôleurs - e
AngularJS
TP 2: Modules et contrôleurs
Dans ce chapitre nous allons voir comment construire des modules et des contrôleurs dans AngularJS.
Angular modules
On peut définir un module dans AngularJS de la manière suivante :
var mymodule = angular.module(’module name’,[]);
Ce module est enregistré en tant que fichier JavaScript, par exemple mymodule.js Maintenant, pour pouvoir
l’utiliser il faut définir dans le document HTML en définissant le module dans ng-app.
<!DOCTYPE html>
<html ng-app="module name">
<head>
<title>Demo Module</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/mymodule.js"></script>
</head>
<body>
</body>
</html>
Dans un module vous pouvez définir des contrôleurs, des services de propriétés, des fonctions ... Dans le premier TP,
nous avons développé hello.html et un contrôleur, hellocontroller.js. Si nous ouvrons le script hellocontroller.js
nous avons le code suivant :
function sayHello($scope) {
$scope.name = { text: ’You Name’ };
}
Maintenons vous allez transformer ce contrôleur en un module en modifiant le code comme suit :
var myApp = angular.module(’myModule’,[]);
myApp.controller(’sayHello’, [’$scope’, function($scope) {
$scope.name = { text: "Your Name" };
}]);
Ce même code peut aussi s’écrire de manière simplifiée comme suit :
var myApp = angular.module(’myModule’,[]);
myApp.controller(’sayHello’,function($scope) {
$scope.name = { text: "Your Name" };
});
Enregistrer ce fichier intitulé mymodule.js.
Maintenant créez un fichier HTML intitulé mymodule.html et écrivez le code suivant :
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Demo Module</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/mymodule.js"></script>
</head>
<body>
<div ng-controller=’sayHello’>
<label for="name">Your name:</label>
<input type="text" id="name" ng-model=’name.text’>
<p>{{name.text}}, how are you?</p>
</div>
</body>
</html>
Enregistrez ce code, puis exécutez avec votre navigateur le fichier mymodule.html.
Nous avons réalisé la même chose que précédemment mais avec une structuration différente. Expliquez en quelque
phrases la différence entre l’utilisation du contrôleur et l’utilisation d’un module ?
1
Contrôleurs
Dans cette section on crée un contrôleur avec plusieurs attributs, par exemple fonction et valeur. Commencez par
créer un fichier intitulé simplemodule.js et contenant le code suivant :
var myApp = angular.module(’SimpleModule’,[]);
myApp.controller(’MyController’, [’$scope’, function($scope) {
$scope.title = ’Module Simple’;
$scope.result = 0;
$scope.add = function(a,b) {
$scope.result = a+b;
};
$scope.multiple = function(a,b) {
$scope.result = a*b;
};
}]);
Vous pouvez voir que les résultats de la fonction sont enregistrés dans $scope.result. Maintenant nous pouvons
utiliser ce module dans le fichier HTML. Créez un fichier HTML intitulé simplemodule.html contenant le code
suivant :
<!DOCTYPE html>
<html ng-app="SimpleModule">
<head>
<title> Module Simple</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/simplemodule.js"></script>
</head>
<body ng-controller=’MyController’>
<br>
<h1>Demo {{title}}</h1>
<div>
<p>
<label for="valA">Valeur de A:</label>
<input type="number" id="valA" ng-model=’valA’>
</p>
<p>
<label for="valB">Valeur de B:</label>
<input type="number" id="valB" ng-model=’valB’>
</p>
<p>
Result: {{ result }}
</p>
<p>
<button ng-click="add(valA,valB)">Additionner</button>
<button ng-click="multiple(valA,valB)">Multiplier</button>
</p>
</div>
</body>
</html>
Explication:
• Le titre est celui du titre du module Angular.
• Deux entrées sont définies en tant que ng-model comme valA et valB
• Le bouton Add appelle la fonction add() avec les paramètres ng-model valA et valB quand on clique dessus
en utilisant ng-click
• Le bouton Multiple appelle la fonction multiple() avec les paramètres ng-model valA et valB quand on
clique dessus en utilisant ng-click
• Le résultat est donné par {{ result }}
Enregistrez ce code et exécutez le fichier simplemodule.html avec votre navigateur. Remplissez les valeurs de
A et de B. Ensuite cliquez sur le bouton Additionner ou multiplier. Ceci permettra d’afficher le résultat. Quelles
différences constatez vous avec un traitement classique en PHP ?
2
Travailler avec plusieurs contrôleurs
Parfois vous pouvez avoir besoin de créer plusieurs contrôleurs dans un module Angular. Pour illustrer cela vous
allez créer un fichier intitulé multicontrollers.js et contenant le code suivant :
var myApp = angular.module(’MultiController’,[]);
myApp.controller(’Math1’, [’$scope’, function($scope) {
$scope.result = 0;
$scope.add = function(a,b) {
$scope.result = a+b;
};
}]);
myApp.controller(’Math2’, [’$scope’, function($scope) {
$scope.result = 0;
$scope.multiple = function(a,b) {
$scope.result = a*b;
};
}]);
Vous avez créer deux contrôleurs, Math1 and Math2.
Dans un fichier HTML, créez un fichier multicontroller.html contenant le code suivant :
<!DOCTYPE html>
<html ng-app="MultiController">
<head>
<title>Simple Module</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/multicontrollers.js"></script>
</head>
<body >
<br>
<div>
<p>
<label for="valA">Valeur de A:</label>
<input type="number" id="valA" ng-model=’valA’>
</p>
<p>
<label for="valB">Valeur de B:</label>
<input type="number" id="valB" ng-model=’valB’>
</p>
<p ng-controller=’Math1’>
<button ng-click="add(valA,valB)">Additionner</button> Result: {{ result }}
</p>
<p ng-controller=’Math2’>
<button ng-click="multiple(valA,valB)">Multiplier</button> Result: {{ result }}
</p>
</div>
</body>
</html>
Chaque contrôleur est défini dans une balise <p>. Ensuite on utilise ng-click pour appeler la fonction contrôleur et
montrer le résultat avec {{ result }} . Enregistrez les codes et exécutez le fichier multicontroller.html. Commentez
l’utilité d’utilisation de deux contrôleurs dans le cas de cet exemple ?
3
Appeler les fonctions et contrôleur AngularJS depuis JavaScript
Des fois vous pouvez avoir besoin d’appeler un contrôleur AngularJS depuis votre JavaScript. Par exemple, vous
créez un fichier contactmodule.js contenant le script suivant :
var myApp = angular.module(’ContactModule’,[]);
myApp.controller(’ContactController’, [’$scope’, function($scope) {
$scope.contact = {
name: "Michael Ken",
email: "[email protected]",
phone: "017993993837"
};
$scope.calculate = function(a,b) {
return (a+b)*3;
}
}]);
On appelle la fonction calculate() et utiliser les données de contact depuis le JavaScript de la page HTML.
Maintenant il faut créer un fichier contactdemo.html et saisissez le script suivant :
<!DOCTYPE html>
<html ng-app="ContactModule">
<head>
<title>Calling AngularJS Controller</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/contactmodule.js"></script>
<script language="JavaScript">
function getContact() {
var mydiv = document.getElementById(’mydiv’);
var scope = angular.element(mydiv).scope();
var contact = scope.contact;
scope.$apply();
alert("Read contact." + JSON.stringify(contact));
} function calculate() {
var mydiv = document.getElementById(’mydiv’);
var scope = angular.element(mydiv).scope();
var result = scope.calculate(2,3);
scope.$apply();
alert("call AngularJS controller function. Result: " + result);
} </script> </head>
<body>
<p>Demo calling AngularJS controller function from External JavaScript</p>
<div id="mydiv" ng-controller="ContactController">
<button onclick="getContact()" >Get Contact</button>
<button onclick="calculate()" >Calculate</button>
</div>
</body>
</html>
Voici comment on effectue l’appel :
• Obtenir l’élément document à l’emplacement où se trouve le contrôleur AngularJS.
• Obtenir scope en appelant angular.element(element object).scope().
• Après l’obtention de scope, on appelle la fonction ou l’attribut data depuis scope.
• Appeler $apply() pour pour l’appliquer dans AngularJS
Enregistrez vos codes. Maintenant exécutez le fichier contactdemo.html dans votre navigateur. En cliquant sur
Get ContactVous devriez obtenir le contact grâce à alert().
Cliquez sur Calculate pour obtenir la boite de dialogue affichant le résultat de la fonction calculate().
