docAngularJS TP 5: Les services - e
download 
Plainte Transcription
AngularJS TP 5: Les services - e
AngularJS
TP 5: Les services
Ce chapitre explique à l’aide de divers exemples, les principes de fonctionnement des services dans AngularJS.
1
Services internes à AngularJS
AngularJS propose des services que nous pouvons directement utiliser. Vous pouvez trouver une mise des services
AngularJS à l’adresse: http://docs.angularjs.org/api/ng/service. A titre d’exemple, nous allons créer une application
AngularJS contenant un service $log. Ce service permet de passer le message à la console du navigateur.
créez un fichier logservice.js contenant le script suivant :
var myApp = angular.module(’LogService’,[]);
myApp.controller(’LogController’, function($scope,$log) {
$scope.$log = $log;
$scope.message = ’AngularJS’;
}); Vous pouvez constater que le contrôleur utilise le service $log. Du coté HTML, nous créons un fichier logservice.html contenant le code suivant :
<!DOCTYPE html>
<html ng-app="LogService">
<head>
<title>Demo Log Service</title>
<script src="lib/angular.min.js"></script>
<script src="controllers/logservice.js"></script>
</head>
<body>
<h1>Demo Log Service</h1>
<br>
<div ng-controller="LogController">
<p>
<label for="message">Message:</label>
<input type="text" id="message" ng-model=’message’>
</p>
<p>
<button ng-click="$log.log(message)">Log</button>
<button ng-click="$log.warn(message)">Warn</button>
<button ng-click="$log.info(message)">Info</button>
<button ng-click="$log.debug(message)">Debug</button>
<button ng-click="$log.error(message)">Error</button>
</p>
</div>
</body>
</html>
Nous créons un ng-model avec le nom ’message’. 5 boutons pour simuler le service $log qui permet de fournir
log(), warn(), info(), debug(), et error(). Enregistrez les codes et exécutez le fichier logservice.html.
Avant de cliquez sur un bouton ouvrer l’outil console du navigateur.
Décrivez et commentez le résultat obtenu.
2
Création de services AngularJS personnalisés
Vous pouvez créer vos propres services AngularJS pour effectuer une tâche particulière. Pour créer un service
AngularJS personnalisé, vous pouvez utiliser service(). Voici une exemple illustrant la syntaxe :
myApp.service(’MyService’, function(){
this.method1 = function() {
}
this.method2 = function() {
}
});
myApp est un module Angular. Vous pouvez également créer un service AngularJS avec factory(). Voici un
exemple :
module.factory(’MyService’, function() {
var factory = {};
factory.method1 = function() {
}
factory.method2 = function() {
}
return factory;
});
A titre d’exemple, nous créons une application AngularJS pour calculer l’aire de deux formes en deux dimensions,
carré et cercle. Créez le fichier angularservice.js contenant le script suivant :
var myApp = angular.module(’MyService’,[]);
myApp.service(’AreaService’, function(){
this.square = function(a) {
return a*a;
};
this.circle = function(r) {
return 3.14*r*r;
};
});
myApp.controller(’MyControlller’, function($scope,AreaService) {
$scope.result = 0;
$scope.calculateSquare = function(a) {
$scope.result = AreaService.square(a);
};
$scope.calculateCircle = function(r) {
$scope.result = AreaService.circle(r);
};
});
Vous pouvez constater que le contrôleur utilise le service AreaService . Pour utiliser
ce module, nous créons un fichier HTML appelé areaservice.html et contenant le code suivant :
<!DOCTYPE html>
<html ng-app="MyService">
<head>
<title>Demo Custom Service</title>
<link rel="stylesheet" href="css/main.css">
<script src="lib/angular.min.js"></script>
<script src="controllers/areaservice.js"></script>
</head>
<body ng-controller=’MyControlller’>
<div>
<p>
<label for="val">Input number:</label>
<input type="number" id="val" ng-model=’val’ >
</p>
<p>
{{ result }} </p>
<p>
<button ng-click="calculateSquare(val)">Calculate Square</button>
<button ng-click="calculateCircle(val)">Calculate Circle</button>
</p>
</div>
</body>
</html>
Enregistrez les codes et exécutez areaservice.html.
sur calculer.
Remplissez le champ requis et cliquez
Donnez un exemple d’application illustrant l’utilité d’un service de ce type.
