Dans AngularJS vous pouvez faire votre propre service, ou utiliser l'un des nombreux services intégrés.
Qu'est-ce qu'un service?
Dans AngularJS, un service est une fonction, ou de l'objet, qui est disponible pour, et limité à, votre application AngularJS.
AngularJS a environ 30 services intégrés. L' un d'eux est le $location service.
L' $location service a des méthodes qui renvoient des informations sur l'emplacement de la page Web en cours:
Exemple
Utilisez le $location de service dans un contrôleur:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
}); Essayez - le vous - même » Notez que le $location de service est passé dans le contrôleur comme un argument. Pour utiliser le service dans le contrôleur, il doit être défini comme une dépendance.
Pourquoi utiliser les services?
Pour de nombreux services, comme le $location service, il semble que vous pouvez utiliser des objets qui sont déjà dans les DOM, comme le window.location objet, et vous pourriez, mais il aurait des limites, au moins pour votre application AngularJS.
AngularJS supervise constamment votre application, et pour lui permettre de gérer les changements et les événements correctement, AngularJS préfère que vous utilisez le $location de service au lieu du window.location objet.
Le Service $ http
Le $http service est l' un des services les plus utilisés dans les applications courantes de AngularJS. Le service fait une demande au serveur, et permet de traiter votre demande la réponse.
Exemple
Utilisez le $http service pour demander des données à partir du serveur:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
}); Essayez - le vous - même » Cet exemple montre une utilisation très simple du $http service. En savoir plus sur le $http service dans le Tutorial Http AngularJS .
Le Service $ timeout
Le $timeout d' window.setTimeout $timeout le service est une version 'AngularJS du window.setTimeout fonction.
Exemple
Afficher un nouveau message après deux secondes:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Essayez - le vous - même » Le Service $ intervalle
L' $interval service est la version 'AngularJS du window.setInterval fonction.
Exemple
Affichage de l'heure à chaque seconde:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Essayez - le vous - même » Créez votre service
Pour créer votre propre service, connectez votre service au module:
Créer un service appelé hexafy :
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Pour utiliser votre service sur mesure, l'ajouter comme une dépendance lors de la définition du filtre:
Exemple
Utilisez le service sur mesure nommé hexafy pour convertir un nombre en un nombre hexadécimal:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
Essayez - le vous - même » Utiliser un service personnalisé à l'intérieur d'un filtre
Une fois que vous avez créé un service, et connecté à votre application, vous pouvez utiliser le service dans tout contrôleur, directive, filtre, ou même à l'intérieur d'autres services.
Pour utiliser le service à l'intérieur d'un filtre, l'ajouter comme une dépendance lors de la définition du filtre:
Le service hexafy utilisé dans le filtre myFormat :
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
Essayez - le vous - même » Vous pouvez utiliser le filtre lors de l'affichage des valeurs d'un objet, ou un tableau:
Créer un service appelé hexafy :
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>
Essayez - le vous - même »