Latest web development tutorials

Servizio AngularJS (Servizio)

AngularJS è possibile creare il proprio servizio, o utilizzare il servizio integrato.

Che cosa è un servizio?

In AngularJS, il servizio è una funzione o di un oggetto può essere utilizzata nell'applicazione AngularJS.

AngularJS costruito più di 30 servizi.

C'è un servizio dilocalizzazione $, che restituisce l'indirizzo URL della pagina corrente.

Esempi

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

Prova »

Si noti che il servizio$ posizione viene passato come parametro al controller.Se si desidera utilizzarlo, è necessario essere definito nel controllore.

Perché usare il servizio?

$ Http AngularJS applicazione è i servizi più comunemente utilizzati.Il servizio invia una richiesta al server, i dati di risposta del server di applicazione trasmessi da.

AngularJS monitora costantemente applicazioni, gestire eventi di modifica, AngularJS utilizzano$ location servire meglio che usare window.location.

servizio $ Http

$ Http AngularJS applicazione è i servizi più comunemente utilizzati.Il servizio invia una richiesta al server, i dati di risposta del server di applicazione trasmessi da.

Esempi

Utilizzare$ dati di richiesta di servizio HTTPal server:

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

Prova »

Quanto sopra è molto semplice istanza del serviziohttp $, più $applicazioni di servizioHTTPinvitiamo a consultare il AngularJS Http esercitazione .

Servizio $ Timeout

AngularJS $ timeout e servizi corrispondente alla funzione JSwindow.setTimeout.

Esempi

Informazioni visualizzate due secondi:

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

Prova »

servizio $ Intervallo

AngularJS $ intervallo corrispondente alla funzione di servizio JSwindow.setInterval.

Esempi

Ogni due secondi per visualizzare le informazioni:

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

Prova »

La creazione di un servizio personalizzato

È possibile creare un accesso al servizio personalizzato, i collegamenti per il modulo:

Creare accesso denominatohexafy di:

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

Per accedere al servizio personalizzato, è necessario definire il filtro quando Add Standalone:

Esempi

Utilizzare un servizio personalizzatohexafy un numero esadecimale convertitore digitale:

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

Prova »

Filtro utilizzando il servizio personalizzato

Quando si crea un servizio personalizzato e connettersi alla propria applicazione, è possibile utilizzarlo nel controller, direttive, filtri o altri servizi.

Hexafy utilizzare il servizio nel myFormatfiltro:

app.filter ( 'myFormat', [ ' hexafy', la funzione (hexafy) {
funzione di ritorno (x) {
tornare hexafy .myFunc (x);
};
}]);

Prova »

Ottenere valore in un array di oggetti che è possibile utilizzare filtri:

Creare Serviziohexafy:

<Ul>
<Li ng-repeat = "x nella conta"> {{x | myFormat}} </ li>
</ Ul>

Prova »