Un service dans le contexte d'AngularJS est ce qui s'occupe de la logique d'affaires, la réutilisation du code, etc.

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.

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;

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"}}});

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'

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>

var promise = $timeout(function() {
  $scope.name = "John Doe";
}, 2000);
 
$scope.cancel = function() {
  $timeout.cancel(promise);
};

Pour utiliser $cookieStore, il faut référencer le fichier angular-cookies.js. Ensuite on peut injecter ngCookies.

var data = {
  id: 1,
  name: 'some name'
}
 
$cookieStore.put('data', data);
var retrievedData = $cookieStore.get('data');
$cookieStore.remove('data', data);

On ne peut pas spécifier de date avec ngCookies. Il faudra alors utiliser un service tierce de cookie pour se faire.

On peut garder des constantes avec $provide.constant(nom, valeur), par exemple, pour garder une référence à IndexedDB:

$provide.constant('indexedDB', window.indexedDB);

On peut se servir de l'$injector pour charger un service au besoin.

let templateService = $injector.get('templateService');
 
templateService.load('template');

Différences entre les types de services : Factory vs Service vs Provider.

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;
});

• AngularJS: Sharing Data Between Controllers