Servizi AngularJS

In AngularJS, puoi creare i tuoi servizi o utilizzare uno dei tanti servizi integrati.

Cos'è un servizio?

In AngularJS, i servizi sono funzioni o oggetti che possono essere utilizzati e sono limitati solo alla tua applicazione AngularJS.

AngularJS ha circa 30 servizi integrati. Uno di questi è $location servizio.

$location Il servizio ha metodi che possono restituire informazioni sulla posizione attuale della pagina web:

Esempio

Uso del servizio $location nel controller:

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

Prova da solo

Nota che$location I servizi vengono passati come parametri ai controller. Per utilizzare il servizio nel controller, deve essere definito come dipendenza.

Perché utilizzare servizi?

Per molti servizi, come $location servizio, sembra che tu possa utilizzare gli oggetti già presenti nel DOM (ad esempio oggetto window.location），ma ci saranno alcune limitazioni, almeno per la tua applicazione AngularJS.

AngularJS监督 costantemente la tua applicazione, preferendo che tu utilizzi $location servizio rispetto all'oggetto window.location.

Servizio $http

Questo esempio dimostra Il servizio è uno dei servizi più utilizzati nell'applicazione AngularJS. Il servizio invia richieste al server e lascia che la tua applicazione elabori le risposte.

Esempio

Richiesta dati dal server utilizzando il servizio $http:

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

Prova da solo

$scope.myWelcome = response.data; Questo esempio dimostra $http

Uso molto semplice del servizio $timeout. Per ulteriori informazioni sul servizio $http, consulta la guida AngularJS Http.

$timeout Il servizio è la versione AngularJS di window.setTimeout funzione.

Esempio

Mostra un nuovo messaggio dopo due secondi:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Ciao Mondo!";
  $timeout(function () {
    $scope.myHeader = "Come stai oggi?";
  }, 2000);
});

Prova da solo

Servizio $interval

$interval Il servizio è la versione AngularJS di window.setInterval funzione.

Esempio

Mostra l'ora ogni secondo:

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

Prova da solo

Creare il tuo servizio personalizzato

Per creare il tuo servizio, connettilo al modulo:

Creare un nome hexafy Servizio:

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

Per utilizzare il tuo servizio personalizzato, aggiungilo come dipendenza durante la definizione del controller:

Esempio

Utilizzando il servizio personalizzato chiamato hexafy per convertire i numeri in numeri esadecimali:

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

Prova da solo

Utilizzo di servizi personalizzati nei filtri

Dopo aver creato il servizio e collegato l'applicazione, puoi utilizzare questo servizio in qualsiasi controller, istruzione, filtro o persino altri servizi.

Per utilizzare il servizio nel filtro, aggiungilo come dipendenza durante la definizione del filtro:

Il servizio hexafy utilizzato nel filtro myFormat:

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

Prova da solo

Puoi utilizzare questo filtro per visualizzare i valori degli oggetti o degli array:

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

Prova da solo