In AngularJS è possibile rendere il proprio servizio, o utilizzare uno dei tanti servizi incorporati.
Che cosa è un servizio?
In AngularJS, un servizio è una funzione, o un oggetto, che è disponibile per, e limitata a, l'applicazione AngularJS.
AngularJS ha circa 30 servizi incorporati. Uno di loro è la $location di servizio.
La $location servizio ha metodi che restituiscono informazioni sulla posizione della pagina Web corrente:
Esempio
Utilizzare la $location di servizio in un controllore:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Prova tu stesso " Si noti che la $location di servizio viene passato al controller come argomento. Per utilizzare il servizio nel controllore, deve essere definita come una dipendenza.
Perché usare servizi?
Per molti servizi, come la $location di servizio, sembra che si potrebbe usare oggetti che sono già nel DOM, come la window.location oggetto, e si potrebbe, ma sarebbe hanno alcune limitazioni, almeno per quanto riguarda l'applicazione AngularJS.
AngularJS vigila costantemente l'applicazione e per poter gestire i cambiamenti e gli eventi correttamente, AngularJS preferisce utilizzare il $location di servizio al posto del window.location oggetto.
Il servizio di $ http
Il $http servizio è uno dei servizi usati più comuni nelle applicazioni AngularJS. Il servizio fa una richiesta al server, e permette l'applicazione di gestire la risposta.
Esempio
Utilizzare il $http servizio per richiedere i dati dal server:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Prova tu stesso " Questo esempio illustra un semplice utilizzo del $http servizio. Ulteriori informazioni sul $http servizio nel AngularJS Http Tutorial .
Il servizio di $ timeout
Il $timeout servizio è la versione AngularJS 'del window.setTimeout funzioni.
Esempio
Visualizzare 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);
});
Prova tu stesso " Il $ Intervallo di manutenzione
L' $interval servizio è la versione AngularJS 'del window.setInterval funzioni.
Esempio
Visualizzare 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 tu stesso " Crea il tuo servizio
Per creare il proprio servizio, collegare il servizio al modulo:
Creare un servizio denominato hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Per utilizzare il servizio personalizzato, aggiungerlo come una dipendenza quando si definisce il filtro:
Esempio
Utilizzare il servizio su ordine di nome hexafy per convertire un numero in un numero esadecimale:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Prova tu stesso " Utilizzare un servizio personalizzato all'interno di un filtro
Dopo aver creato un servizio, e collegato alla propria applicazione, è possibile utilizzare il servizio in qualsiasi controller, direttiva, filtro, o anche all'interno di altri servizi.
Per utilizzare il servizio all'interno di un filtro, inserirlo 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 tu stesso " È possibile utilizzare il filtro nella visualizzazione dei valori da un oggetto, o un array:
Creare un servizio denominato hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Prova tu stesso "