Services AngularJS

Dans AngularJS, vous pouvez créer vos propres services 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 peut être utilisé et est limité à votre application AngularJS.

AngularJS dispose d'environ 30 services intégrés. L'un d'eux est $location Le service.

$location Le service dispose de méthodes qui peuvent retourner des informations sur la position actuelle de la page web :

Exemple

Utilisation du service $location dans le contrôleur :

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

Essayez-le vous-même

Veuillez noter que,$location Les services sont passés en tant que paramètres aux contrôleurs. Pour utiliser ce service dans le contrôleur, il doit être défini comme dépendance.

Pourquoi utiliser un service ?

Pour de nombreux services, comme $location service, vous semblez pouvoir utiliser les objets existants dans le DOM (par exemple l'objet window.location），mais il y aura quelques limitations, au moins pour votre application AngularJS.

AngularJS surveille constamment votre application, pour qu'elle puisse gérer correctement les changements et les événements, AngularJS préfère que vous utilisiez $location service plutôt que l'objet window.location.

$http service

Cet exemple démontre Le service est l'un des services les plus couramment utilisés dans les applications AngularJS. Ce service envoie des requêtes au serveur et permet à votre application de traiter les réponses.

Exemple

Utilisez le service $http pour demander des données au serveur :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
  });
});

Essayez-le vous-même

$scope.myWelcome = response.data; Cet exemple démontre $http

Utilisation très simple du service $timeout. Pour plus d'informations sur le service $http, consultez le tutoriel AngularJS Http.

$timeout Le service est une version AngularJS de window.setTimeout Fonction.

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);
});

Essayez-le vous-même

Service $interval

$interval Le service est une version AngularJS de window.setInterval Fonction.

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);
});

Essayez-le vous-même

Créer votre propre service

Pour créer votre propre service, connectez-le au module :

Créer un nom hexafy Le service :

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 un service personnalisé nommé hexafy pour convertir un nombre en nombre hexadécimal :

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

Essayez-le vous-même

Utilisation de services personnalisés dans les filtres

Après avoir créé le service et le connecté à votre application, vous pouvez utiliser ce service dans n'importe quel contrôleur, instruction, filtre ou même autre service.

Pour utiliser un service dans un filtre, ajoutez-le en tant que dépendance lors de la définition du filtre :

Service hexafy utilisé dans le filtre myFormat :

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
});

Essayez-le vous-même

Vous pouvez utiliser ce filtre pour afficher les valeurs des objets ou des tableaux affichés :

<ul>
  <li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

Essayez-le vous-même