Services AngularJS (Service)

Dans AngularJS, vous pouvez créer vos propres services, ou utiliser des services intégrés.

Qu'est-ce qu'un service ?

Dans AngularJS, un service est une fonction ou un objet qui peut être utilisé dans votre application AngularJS.

AngularJS dispose de plus de 30 services intégrés.

Il y a un$locationservice, qui peut renvoyer l'adresse URL de la page actuelle.

Exemple

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

Essayez-le »

Remarque$locationUn service est passé en paramètre au contrôleur. Pour l'utiliser, vous devez le définir dans le contrôleur.

Pourquoi utiliser des services ?

Parmi de nombreux services, tels que le service $location, il peut utiliser des objets existant dans le DOM, similaires à l'objet window.location, mais l'objet window.location présente certaines limitations dans les applications AngularJS.

AngularJS surveille constamment l'application et gère les changements d'événements. AngularJS utilise$locationservices plutôt que d'utiliserwindow.locationobjets, ce qui est préférable.

$location vs window.location

  window.location $location.service
Objectif Permet des opérations de lecture et d'écriture sur l'emplacement actuel du navigateur Permet des opérations de lecture et d'écriture sur l'emplacement actuel du navigateur
API Expose un objet qui peut être lu et écrit Exposer un lecteur/rédacteur de style jQuery
S'il est intégré au cycle de vie de l'application AngularJS non Peut accéder à chaque étape du cycle de vie de l'application et est intégré à $watch
S'il est parfaitement intégré à l'API HTML5 non Oui (avec une dégradation gracieuse pour les navigateurs plus anciens)
S'il est lié au contexte de l'application Non, window.location.path renvoie "/docroot/actual/path" Oui, $location.path() renvoie "/actual/path"

Service $http

$httpC'est le service le plus couramment utilisé dans les applications AngularJS. Le service envoie des requêtes au serveur, et l'application répond aux données transmises par le serveur.

Exemple

Utilisez le service$httppour 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;
    });
});

Essayez-le »

L'exemple ci-dessus est un exemple très simple de service$http. Pour plus d'applications de service$http, voir letutoriel Http AngularJS。

Service $timeout

AngularJS $timeoutLe service correspond au JS window.setTimeoutfonction.

Exemple

Afficher l'information 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 »

Service $interval

AngularJS $intervalLe service correspond à la fonction JSwindow.setInterval.

Exemple

Afficher les informations chaque seconde :

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 »

Création d'un service personnalisé

Vous pouvez créer un service personnalisé et le lier à votre module :

Créez un service nomméhexafyservice :

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

Pour utiliser un service personnalisé, vous devez l'ajouter séparément lors de la définition du contrôleur et définir la dépendance :

Exemple

Utiliser un service personnaliséhexafyConvertir un nombre en nombre hexadécimal :

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

Essayez-le »

Utilisation d'un service personnalisé dans un filtre

Une fois que vous avez créé un service personnalisé et que vous l'avez connecté à votre application, vous pouvez l'utiliser dans des contrôleurs, des directives, des filtres ou d'autres services.

Dans le filtremyFormatutilisez le servicehexafy:

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

Essayez-le vous-même »

Lorsque vous récupérez des valeurs dans un tableau d'objets, vous pouvez utiliser des filtres :

Créer un servicehexafy:

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

Essayez-le vous-même »
Autres extensions