Servizi AngularJS
Il Ottobre 5, 2021 da adminIn AngularJS puoi creare il tuo servizio, o usare uno dei molti servizi integrati.
Cos’è un servizio?
In AngularJS, un servizio è una funzione, o un oggetto, che è disponibile per, e limitato alla tua applicazione AngularJS.
AngularJS ha circa 30 servizi integrati. Uno di questi è il servizio $location.
Il servizio $location ha metodi che restituiscono informazioni sulla posizione della pagina web corrente:
Esempio
Utilizza il servizio $location in un controller:
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Prova tu stesso ”
Nota che il servizio $locationviene passato al controller come argomento. Per usare il servizio nel controller, deve essere definito come dipendenza.
Perché usare i servizi?
Per molti servizi, come il servizio $location, sembra che si possano usare oggetti che sono già nel DOM, come l’oggetto window.location, e si potrebbe, ma avrebbe alcune limitazioni, almeno per la vostra applicazione AngularJS.
AngularJS supervisiona costantemente la tua applicazione, e per gestire correttamente i cambiamenti e gli eventi, AngularJS preferisce che tu usi il servizio $location invece dell’oggetto window.location.
Il servizio $http
Il servizio $http è uno dei servizi più usati nelle applicazioni AngularJS. Il servizio fa una richiesta al server e lascia che la tua applicazione gestisca la risposta.
Esempio
Utilizza il servizio $http per richiedere dati dal server:
app.controller(‘myCtrl’, function($scope, $http) {
$http.get(“welcome.htm”).then(function (response) {
$scope.myWelcome = response.data;
});
});
Prova tu stesso ”
Questo esempio dimostra un uso molto semplice del servizio $http. Scopri di più sul servizio $http nel tutorial AngularJS Http.
Il servizio $timeout
Il servizio $timeoutè la versione di AngularJS della funzione window.setTimeout.
Esempio
Visualizza un nuovo messaggio dopo due secondi:
app.controller(‘myCtrl’, function($scope, $timeout) {
$scope.myHeader = “Hello World!”;
$timeout(function () {
$scope.myHeader = “How are you today?”;
}, 2000);
});
Prova tu stesso ”
Il servizio $interval
Il servizio $interval è la versione di AngularJS della funzione window.setInterval.
Esempio
Visualizza l’ora ogni secondo:
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 tuo servizio, collega il tuo servizio al modulo:
Crea un servizio chiamato hexafy:
this.myFunc = function (x) {
return x.toString(16);
}
});
Per usare il tuo servizio personalizzato, aggiungilo come dipendenza quando definisci il controller:
Esempio
Usa il servizio personalizzato chiamato hexafy per convertire un numero in un numero esadecimale:
$scope.hex = hexafy.myFunc(255);
});
Prova tu stesso ”
Usa un servizio personalizzato all’interno di un filtro
Una volta creato un servizio, e collegato alla tua applicazione, puoi usare il servizio in qualsiasi controller, direttiva, filtro, o anche dentro altri servizi.
Per usare il servizio all’interno di un filtro, aggiungilo come dipendenza quando definisci il filtro:
Il servizio hexafy usato nel filtro myFormat:
Prova tu stesso ”
Puoi usare il filtro per visualizzare i valori di un oggetto o di un array:
Crea un servizio chiamato hexafy:
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>
Prova tu stesso ”
Lascia un commento