AngularJS-Dienste (Service)

In AngularJS können Sie Ihre eigenen Dienste erstellen oder integrierte Dienste verwenden.

Was ist ein Service?

In AngularJS ist ein Service eine Funktion oder ein Objekt, die bzw. das in deiner AngularJS-Anwendung verwendet werden kann.

AngularJS hat mehr als 30 integrierte Services.

Es gibt den$locationService, der die URL-Adresse der aktuellen Seite zurückgeben kann.

Beispiel

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

Ausprobieren »

Hinweis$locationEin Service wird als Parameter an den Controller übergeben. Um ihn zu verwenden, musst du ihn im Controller definieren.

Warum Services verwenden?

Unter vielen Services, wie dem $location-Service, kann er im DOM vorhandene Objekte verwenden, ähnlich wie das window.location-Objekt, allerdings hat das window.location-Objekt in AngularJS-Anwendungen gewisse Einschränkungen.

AngularJS überwacht die Anwendung ständig und verarbeitet Event-Änderungen. AngularJS verwendet lieber$locationServices anstelle vonwindow.locationObjekten, was besser ist.

$location vs window.location

  window.location $location.service
Zweck Ermöglicht Lese- und Schreibvorgänge am aktuellen Browser-Speicherort Ermöglicht Lese- und Schreibvorgänge am aktuellen Browser-Speicherort
API Stellt ein Objekt bereit, das gelesen und beschrieben werden kann Stellt einen Reader/Writer im jQuery-Stil bereit
Ob in den Anwendungslebenszyklus von AngularJS integriert nein Kann auf jede Phase im Anwendungslebenszyklus zugreifen und ist mit $watch integriert
Ob nahtlos in die HTML5-API integriert nein Ja (mit sanftem Rückfall (Graceful Degradation) für ältere Browser)
Ob auf den Anwendungskontext bezogen Nein, window.location.path gibt "/docroot/actual/path" zurück Ja, $location.path() gibt "/actual/path" zurück

$http Service

$httpDies ist der am häufigsten verwendete Service in AngularJS-Anwendungen. Der Service sendet Anfragen an den Server, und die Anwendung reagiert auf die vom Server übertragenen Daten.

Beispiel

Verwende den$httpService, um Daten vom Server anzufordern:

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

Ausprobieren »

Das Obige ist ein sehr einfaches$httpService-Beispiel. Für weitere$httpService-Anwendungen siehe dasAngularJS Http Tutorial。

$timeout Service

Der AngularJS $timeoutService entspricht der JS window.setTimeoutFunktion.

Beispiel

Informationen nach zwei Sekunden anzeigen:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

Ausprobieren »

$interval Service

Der AngularJS $intervalService entspricht der JSwindow.setIntervalFunktion.

Beispiel

Informationen jede Sekunde anzeigen:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

Ausprobieren »

Erstellen eines benutzerdefinierten Services

Du kannst einen benutzerdefinierten Service erstellen und ihn mit deinem Modul verknüpfen:

Einen Service namenshexafyerstellen:

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

Um einen benutzerdefinierten Service zu verwenden, musst du ihn beim Definieren des Controllers separat hinzufügen und die Abhängigkeit festlegen:

Beispiel

Benutzerdefinierten Servicehexafyverwenden, um eine Zahl in eine hexadezimale Zahl zu konvertieren:

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

Ausprobieren »

Verwenden eines benutzerdefinierten Services in einem Filter

Sobald du einen benutzerdefinierten Service erstellt und mit deiner Anwendung verbunden hast, kannst du ihn in Controllern, Direktiven, Filtern oder anderen Services verwenden.

Im FiltermyFormatden Servicehexafy:

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

Selbst ausprobieren »

Beim Abrufen von Werten in einem Array von Objekten kannst du Filter verwenden:

Einen Service erstellenhexafy:

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

Selbst ausprobieren »
Andere Erweiterungen