AngularJS-Dienst

In AngularJS können Sie eigene Dienste erstellen oder einer der vielen eingebetteten Dienste verwenden.

Was ist ein Dienst?

In AngularJS sind Dienste Funktionen oder Objekte, die für und nur für Ihre AngularJS-Anwendung verwendet werden können.

AngularJS hat etwa 30 eingebettete Dienste. Einer davon ist $location Dienst.

$location Der Dienst verfügt über Methoden, um Informationen zur aktuellen Webseitenposition zurückzugeben:

Beispiel

Dienst $location im Controller verwenden:

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

Probieren Sie es selbst aus

Bitte beachten Sie:$location Dienste werden als Parameter an den Controller übergeben. Um den Dienst im Controller zu verwenden, muss er als Abhängigkeit definiert werden.

Warum den Dienst verwenden?

Für viele Dienste wie $location Dienst, Sie scheinen bereits vorhandene Objekte im DOM verwenden zu können (z.B. window.location-Objekt），aber es gibt einige Einschränkungen, mindestens für Ihre AngularJS-Anwendung.

AngularJS überwacht ständig Ihre Anwendung, um sicherzustellen, dass sie Änderungen und Ereignisse korrekt verarbeitet, daher bevorzugt AngularJS, dass Sie $location Dienst anstelle des window.location-Objekts.

$http-Dienst

$http Dieser Dienst ist einer der häufigsten Dienste in AngularJS-Anwendungen. Er sendet Anfragen an den Server und lässt Ihre Anwendung die Antworten verarbeiten.

Beispiel

Mit dem $http-Dienst werden Daten vom Server angefordert:

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

Probieren Sie es selbst aus

Dieses Beispiel zeigt $http Sehr einfache Verwendung des Dienstes. Erfahren Sie mehr über den $http-Dienst im AngularJS Http-Tutorial.

$timeout-Dienst

$timeout Der Dienst ist die AngularJS-Version von window.setTimeout Funktion.

Beispiel

Nach zwei Sekunden eine neue Nachricht 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);
});

Probieren Sie es selbst aus

$interval-Dienst

$interval Der Dienst ist die AngularJS-Version von window.setInterval Funktion.

Beispiel

Jede Sekunde die Zeit 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);
});

Probieren Sie es selbst aus

Erstellen Sie Ihren eigenen Dienst

Um Ihren eigenen Dienst zu erstellen, verbinden Sie den Dienst mit dem Modul:

Erstellen Sie einen Namens hexafy Dienst:

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

Um Ihren benutzerdefinierten Dienst zu verwenden, fügen Sie ihn bei der Definition des Kontrollers als Abhängigkeit hinzu:

Beispiel

Mit dem benannten benutzerdefinierten Dienst hexafy wird die Zahl in eine sechszellige Zahl umgewandelt:

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

Probieren Sie es selbst aus

Benutzerdefinierter Dienst im Filter verwenden

Erstellen Sie den Dienst und verbinden Sie ihn mit Ihrer Anwendung, dann können Sie den Dienst in jedem Kontroller, Bevel, Filter oder sogar anderen Diensten verwenden.

Um den Dienst im Filter zu verwenden, fügen Sie ihn bei der Definition des Filters als Abhängigkeit hinzu:

Dienst hexafy, der im Filter myFormat verwendet wird:

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

Probieren Sie es selbst aus

Sie können diesen Filter verwenden, um Werte in Objekten oder Arrays anzuzeigen:

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

Probieren Sie es selbst aus