Latest web development tutorials

Service de AngularJS (Service)

AngularJS vous pouvez créer votre propre service, ou utiliser le service intégré.

Qu'est-ce qu'un service?

Dans AngularJS, le service est une fonction ou d'un objet peut être utilisé dans votre application AngularJS.

AngularJS construit plus de 30 services.

Il y a un servicede localisation de $, ce qui renvoie l'adresse URL de la page en cours.

Exemples

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

Essayez »

Notez que le servicede localisation $ est passé en paramètre à la commande.Si vous voulez l'utiliser, vous devez être défini dans le contrôleur.

Pourquoi utiliser le service?

$ Http AngularJS application est les services les plus couramment utilisés.Le service envoie une requête au serveur, les données de réponse du serveur d'applications transmises depuis.

AngularJS surveille en permanence l' application, gérer les événements changent, AngularJS utilisent$ location servir mieux que d' utiliser window.location.

Service $ Http

$ Http AngularJS application est les services les plus couramment utilisés.Le service envoie une requête au serveur, les données de réponse du serveur d'applications transmises depuis.

Exemples

Utilisez$ les données de demande de service httpsur le serveur:

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ portée, $ http) {
$ Http.get ( "welcome.htm") .alors (function (réponse) {
$ Scope.myWelcome = response.data;
});
});

Essayez »

Ce qui précède est une instance de service$ http très simple, plus $applications de servicehttpS'il vous plaît voir AngularJS Http tutoriel .

$ Service Timeout

AngularJS $ timeout et des services correspondant à la fonction JSwindow.setTimeout.

Exemples

Les informations affichées deux secondes:

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ portée, $ timeout) {
$ Scope.myHeader = "Bonjour tout le monde!" ;
$ Timeout (function () {
$ Scope.myHeader = "Comment allez - vous aujourd'hui ?";
}, 2000);
});

Essayez »

Service $ Interval

AngularJS $ intervalle correspondant à la fonction de service JSwindow.setInterval.

Exemples

Toutes les deux secondes pour afficher des informations:

var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ portée, $ intervalle) {
$ Scope.theTime = new Date () toLocaleTimeString () .;
$ Intervalle (function () {
$ Scope.theTime = new Date () toLocaleTimeString () .;
}, 1000);
});

Essayez »

Création d'un service personnalisé

Vous pouvez créer un accès au service personnalisé, des liens vers votre module:

Créer un accès nomméhexafy de:

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

Pour accéder au service personnalisé, vous devez définir le filtre lorsque la Ajouter Standalone:

Exemples

Utiliser un service personnaliséhexafy un nombre convertisseur hexadécimaux numériques:

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

Essayez »

Filtre en utilisant le service personnalisé

Lorsque vous créez un service personnalisé et de vous connecter à votre application, vous pouvez l'utiliser dans le contrôleur, des directives, des filtres, ou d'autres services.

Hexafy utiliser le service dans le MyFormatfiltre dans:

app.filter ( 'MyFormat', [ ' hexafy', function (hexafy) {
fonction de retour (x) {
retour hexafy .myFunc (x);
};
}]);

Essayez »

Obtenir la valeur dans un tableau d'objets que vous pouvez utiliser les filtres:

Créerhexafy Service:

<Ul>
<Li ng-repeat = "x numération"> {{x | MyFormat}} </ li>
</ Ul>

Essayez »