Servizi AngularJS
In AngularJS puoi creare il tuo servizio o utilizzare uno dei tanti servizi integrati.
Che cos'è un servizio?
In AngularJS, un servizio è una funzione o un oggetto disponibile e limitato all'applicazione AngularJS.
AngularJS ha circa 30 servizi integrati. Uno di questi è il $location
servizio.
Il $locationservizio ha metodi che restituiscono informazioni sulla posizione della pagina Web corrente:
Esempio
Utilizzare il $locationservizio in un controller:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Si noti che il $locationservizio viene passato al controller come argomento. Per poter utilizzare il servizio nel controller, deve essere definito come una dipendenza.
Perché usare i Servizi?
Per molti servizi, come il $locationservizio, sembra che tu possa usare oggetti che sono già nel DOM, come l' window.location
oggetto, e potresti, ma avrebbe alcune limitazioni, almeno per la tua applicazione AngularJS.
AngularJS supervisiona costantemente la tua applicazione e, affinché gestisca correttamente le modifiche e gli eventi, AngularJS preferisce che tu usi il $location
servizio invece window.locationdell'oggetto.
Il servizio $http
Il $httpservizio è uno dei servizi più comuni utilizzati nelle applicazioni AngularJS. Il servizio effettua una richiesta al server e consente all'applicazione di gestire la risposta.
Esempio
Utilizza il $httpservizio per richiedere dati al server:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Questo esempio mostra un uso molto semplice del $httpservizio. Scopri di più sul $httpservizio in AngularJS Http Tutorial .
Il servizio $ timeout
Il $timeoutservizio è la versione della
window.setTimeoutfunzione di AngularJS.
Esempio
Visualizza un nuovo messaggio dopo due secondi:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Il servizio $ intervallo
Il $intervalservizio è la versione della
window.setIntervalfunzione di AngularJS.
Esempio
Visualizza 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);
});
Crea il tuo servizio
Per creare il tuo servizio, collega il tuo servizio al modulo:
Crea un servizio chiamato hexafy:
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
Utilizza il servizio personalizzato denominato hexafyper convertire un numero in un numero esadecimale:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Usa un servizio personalizzato all'interno di un filtro
Dopo aver creato un servizio e averlo connesso alla tua applicazione, puoi utilizzare il servizio in qualsiasi controller, direttiva, filtro o anche all'interno di altri servizi.
Per utilizzare il servizio all'interno di un filtro, aggiungilo come dipendenza durante la definizione del filtro:
Il servizio hexafyutilizzato nel filtro myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
È possibile utilizzare il filtro durante la visualizzazione dei valori di un oggetto o di una matrice:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>