AngularJS — Services

What are Services?

Services are singletons that provide reusable functionality.

Factory

app.factory('MathService', function() {
  return {
    add: function(a, b) { return a + b; },
    multiply: function(a, b) { return a * b; }
  };
});

// Usage
app.controller('MyController', function($scope, MathService) {
  $scope.result = MathService.add(5, 3);
});

Service

app.service('UserService', function($http) {
  this.getUsers = function() {
    return $http.get('/api/users');
  };
  
  this.createUser = function(user) {
    return $http.post('/api/users', user);
  };
});

Provider

app.provider('ConfigService', function() {
  var apiUrl = '';
  
  this.setApiUrl = function(url) {
    apiUrl = url;
  };
  
  this.$get = function($http) {
    return {
      get: function(path) {
        return $http.get(apiUrl + path);
      }
    };
  };
});

// Config
app.config(function(ConfigServiceProvider) {
  ConfigServiceProvider.setApiUrl('https://api.example.com');
});

Built-in Services

Service	Description
$http	HTTP requests
$scope	Data model
$rootScope	Root scope
$timeout	setTimeout
$interval	setInterval
$location	URL manipulation

Mini Practice

1. Create a factory
2. Create a service
3. Use $http service
4. Inject services into controllers

Up Next

Continue with Dependency Injection — DI in AngularJS.