Services AngularJS
On octobre 5, 2021 by adminEn AngularJS, vous pouvez créer votre propre service, ou utiliser l’un des nombreux services intégrés.
Qu’est-ce qu’un service ?
En AngularJS, un service est une fonction, ou un objet, qui est disponible pour, et limité à, votre application AngularJS.
AngularJS a environ 30 services intégrés. L’un d’entre eux est le service $location.
Le service $location possède des méthodes qui renvoient des informations sur l’emplacement de la page Web actuelle :
Exemple
Utiliser le service $location dans un contrôleur :
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Essayez-le vous-même »
Notez que le service $location 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 des services ?
Pour de nombreux services, comme le service $location, il semble que vous pourriez utiliser des objets qui sont déjà dans le DOM, comme l’objet window.location, et vous le pourriez, mais cela aurait certaines limites, au moins pour votre application AngularJS.
AngularJS supervise constamment votre application, et pour qu’il gère correctement les changements et les événements, AngularJS préfère que vous utilisiez le service $location plutôt que l’objet window.location.
Le service $http
Le service $http est l’un des services les plus utilisés dans les applications AngularJS. Le service fait une demande au serveur, et laisse votre application gérer la réponse.
Exemple
Utiliser le service $http pour demander des données au serveur:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(« welcome.htm »).then(function (response) {
$scope.myWelcome = response.data;
});
});
Essayez-le vous-même »
Cet exemple démontre une utilisation très simple du service $http. Apprenez-en plus sur le service $http dans le tutoriel AngularJS Http.
Le service $timeout
Le service $timeout est la version d’AngularJS de la fonction window.setTimeout.
Exemple
Afficher un nouveau message après deux secondes:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = « Hello World ! »;
$timeout(function () {
$scope.myHeader = « How are you today ? »;
}, 2000);
});
Essayez-le vous-même »
Le service $interval
Le service $interval est la version d’AngularJS de la fonction window.setInterval.
Exemple
Afficher l’heure toutes les secondes:
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
Essayez-le vous-même »
Créer votre propre service
Pour créer votre propre service, connectez-le au module:
Créer un service nommé hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
});
Pour utiliser votre service personnalisé, ajoutez-le comme dépendance lors de la définition du contrôleur:
Exemple
Utiliser le service personnalisé nommé hexafy pour convertir un nombre en nombre hexadécimal:
$scope.hex = hexafy.myFunc(255);
});
Essayez vous-même »
Utiliser un service personnalisé à l’intérieur d’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 à l’intérieur d’autres services.
Pour utiliser le service à l’intérieur d’un filtre, ajoutez-le comme dépendance lors de la définition du filtre :
Le service hexafy utilisé dans le filtre myFormat:
Essayez vous-même »
Vous pouvez utiliser le filtre lors de l’affichage des valeurs d’un objet, ou d’un tableau :
Créer un service nommé hexafy:
<li ng-repeat= »x in counts »>{{x | monFormat}}</li>
</ul>
Essayez-le vous-même »
.
Laisser un commentaire