Ceci est une ancienne révision du document !
Table des matières
Services
Un service dans le contexte d'AngularJS est ce qui s'occupe de la logique d'affaires, la réutilisation du code, etc.
Built-in services
Services disponibles : $resource, $q, $anchorScroll, $cacheFactory, $compile, $parse, $locale, $timeout, $exceptionHandler, $filter, $cookieStore, $interpolate, $log, $rootScope, $window, $document, $rootElement, $route, $routeParams, $location, $httpBackend, $controller.
Pour le service $filter
, aller dans filtres.
$http
Sert à faire une requête HTTP à une ressource.
var deferred = $q.defer(); $http({mthod: 'GET', url: '/url/data'}).success(function(data, status, headers, config) { deferred.resolve(data); }).error(function(data, status, headers, config) { deferred.reject(status); }); return deferred.promise;
$resource
Le service $resource
peut servir à remplacer $http
si l'appel se fait sur un Web API RESTful.
Il faut d'abord injecter ngResource
avec le module application:
angular.module('myApp', ['ngResource']);
On l'inclut dans le contôleur/service où on l'utilise. Ensuite, on peut faire :
return $resource('/api/resource/:id, {id: '@id'}).get({id:1});
On peut aussi le faire en spécifiant les fonctions callback success et failure :
var deferred = $q.defer(); return $resource('/api/resource/:id, {id: '@id'}).get({id:1}, function(resource) { deferred.resolve(resource); }, function(response) { deferred.reject(response); }); return deferred.promise;
var resource = $resource('/data/event/:id', {id: '@id'}, {"getAll": {method: "GET", isArray: true, params: {something: "foo"}}});
$parse
var fn = $parse('1+2'); console.log(fn()); // affiche 3 var getter = $parse('event.name'); var context = {event: name: 'AngularJS'}}; console.log(getter(context)); // affiche 'AngularJS' var setter = getter.assign; setter(context, 'Code Retreat'); console.log(context.event.name); // Affiche 'Code Retreat'
$locale
Pour utiliser la localisation, il faut télécharger le ou les fichiers i18n d'Angular (exemple, https://code.angularjs.org/1.3.0/i18n/).
En incluant un fichier JS, par exemple angular-locale_fr-ca.js
, la localisation se fait en utilisant $locale
.
$scope.myDate = Date.now(); $scope.myFormat = $locale.DATETIME_FORMATS.fullDate;
Dans le template:
<p>{{myDate | date:myFormat }}</p>
$timeout
var promise = $timeout(function() { $scope.name = "John Doe"; }, 2000); $scope.cancel = function() { $timeout.cancel(promise); };
Types de services
Différences entre les types de services : Factory vs Service vs Provider.
Value
Factory
Service
Provider
Créer un service
angular.module('myApp').factory('eventData', function() { return { somedata: { data: 'data' } }; });
Après dans le contrôleur, on peut injecter le service :
angular.module('myApp').controller('myCtrl', function($scope, eventData) { $scope.data = eventData.somedata; });