AngularJS Services

In AngularJS kunt u uw eigen services maken of gebruik maken van een van de vele ingebouwde services.

Wat is een service?

In AngularJS zijn services functies of objecten die kunnen worden gebruikt en beperkt zijn tot uw AngularJS-applicatie.

AngularJS heeft ongeveer 30 ingebouwde services. Een van deze is $location service.

$location De service heeft methoden die informatie over de huidige locatie van de webpagina kunnen retourneren:

Voorbeeld

Gebruik van de $location-service in de controller:

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

Probeer het zelf

Let op,$location Services worden als parameter doorgegeven aan controllers. Om een service in een controller te gebruiken, moet deze als afhankelijkheid worden gedefinieerd.

Waarom een service gebruiken?

Voor veel services zoals $location services, het lijkt erop dat u gebruik kunt maken van objecten die al in de DOM aanwezig zijn (bijvoorbeeld window.location-object），maar er zijn enkele beperkingen, ten minste voor uw AngularJS-applicatie.

AngularJS monitort voortdurend uw applicatie en verkiest dat u $location service in plaats van het window.location-object.

$http-service

$http De service is een van de meest gebruikte services in AngularJS-applicaties. De service stuurt een verzoek naar de server en laat uw applicatie de reactie verwerken.

Voorbeeld

Gebruik de $http-service om gegevens van de server op te vragen:

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

Probeer het zelf

Dit voorbeeld demonstreert $http Voor meer informatie over de $http-service, raadpleeg de AngularJS Http-tutorial.

Deze eenvoudige gebruikswijze van de $timeout-service.

$timeout Een service is de AngularJS-versie van window.setTimeout functie.

Voorbeeld

Twee seconden later een nieuwe bericht weergeven:

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

Probeer het zelf

$interval-service

$interval Een service is de AngularJS-versie van window.setInterval functie.

Voorbeeld

Tijdstempel elke seconde weergeven:

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

Probeer het zelf

Maak uw eigen service

Om uw eigen service te maken, koppel deze aan het module:

Maak een service genaamd hexafy service:

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

Om uw aangepaste service te gebruiken, voeg deze toe als afhankelijkheid bij het definiëren van de controller:

Voorbeeld

Gebruik een aangepaste service genaamd hexafy om een getal om te zetten naar een hexadecimaal getal:

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

Probeer het zelf

Gebruik een aangepaste service in een filter

Maak een service aan en koppel deze aan uw applicatie, daarna kunt u deze service gebruiken in elke controller, directive, filter of zelfs andere services.

Om een service te gebruiken in een filter, voeg deze toe als afhankelijkheid bij het definiëren van de filter:

De door de filter myFormat gebruikte service hexafy:

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

Probeer het zelf

U kunt deze filter gebruiken om waarden in objecten of arrays weer te geven:

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

Probeer het zelf