Services & Factories

Code

angular.module('servicesApp', [])
.factory('UserService', function() {
  const users = [];
  return {
    add: function(user) { users.push(user); },
    list: function() { return users; },
    count: function() { return users.length; }
  };
})
.service('AuthService', function($http) {
  this.login = function(creds) {
    return $http.post('/api/login', creds);
  };
  this.logout = function() {
    return $http.post('/api/logout');
  };
})
.controller('AppController', function(UserService, AuthService) {
  const vm = this;
  vm.users = UserService.list();
  vm.addUser = function() {
    UserService.add(vm.newUser);
    vm.users = UserService.list();
  };
});

Explanation

Both factory and service produce singletons shared across the app; factory returns an object literal, while service uses 'this' as a constructor. Inject them by name into controllers (AngularJS resolves dependencies from parameter names unless minified—use $inject or array annotation). They are lazy-instantiated once per app lifetime.

More AngularJS Snippets