Services AngularJS
Dans AngularJS, vous pouvez créer votre propre service ou utiliser l'un des nombreux services intégrés.
Qu'est-ce qu'un service ?
Dans AngularJS, un service est une fonction, ou un objet, qui est disponible et limité à votre application AngularJS.
AngularJS a environ 30 services intégrés. L'un d'eux est le $location
service.
Le $locationservice dispose de méthodes qui renvoient des informations sur l'emplacement de la page Web actuelle :
Exemple
Utilisez le $locationservice dans un contrôleur :
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Notez que le $locationservice est transmis au contrôleur en tant qu'argument. Afin d'utiliser le service dans le contrôleur, il doit être défini comme une dépendance.
Pourquoi utiliser les Services ?
Pour de nombreux services, comme le $locationservice, il semble que vous puissiez utiliser des objets qui sont déjà dans le DOM, comme l' window.location
objet, et vous le pouvez, mais cela aurait certaines limitations, du moins pour votre application AngularJS.
AngularJS surveille constamment votre application, et pour qu'elle gère correctement les changements et les événements, AngularJS préfère que vous utilisiez le $location
service plutôt que l' window.locationobjet.
Le service $ http
Le $httpservice est l'un des services les plus couramment utilisés dans les applications AngularJS. Le service envoie une requête au serveur et laisse votre application gérer la réponse.
Exemple
Utilisez le $httpservice pour demander des données au serveur :
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Cet exemple illustre une utilisation très simple du $httpservice. En savoir plus sur le $httpservice dans le didacticiel AngularJS Http .
Le service $timeout
Le $timeoutservice est la version AngularJS de la
window.setTimeoutfonction.
Exemple
Afficher un nouveau message après deux secondes :
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Le service $intervalle
Le $intervalservice est la version AngularJS de la
window.setIntervalfonction.
Exemple
Afficher l'heure toutes les secondes :
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Créez votre propre service
Pour créer votre propre service, connectez votre service au module :
Créez un service nomméhexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Pour utiliser votre service personnalisé, ajoutez-le en tant que dépendance lors de la définition du contrôleur :
Exemple
Utilisez le service personnalisé nommé hexafypour convertir un nombre en un nombre hexadécimal :
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Utiliser un service personnalisé dans un filtre
Une fois que vous avez créé un service et que vous l'avez connecté à votre application, vous pouvez utiliser le service dans n'importe quel contrôleur, directive, filtre ou même dans d'autres services.
Pour utiliser le service dans un filtre, ajoutez-le en tant que dépendance lors de la définition du filtre :
Le service hexafyutilisé dans le filtre myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Vous pouvez utiliser le filtre lors de l'affichage des valeurs d'un objet ou d'un tableau :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>