Angular JS

To share the reusable logic & prevent duplication we've to use services:

Value (Used Often) - simplest recipes, that shares value through the app repeatedly.

Factory (Most Commonly Used) - shares methods and objects.

Service (Rarely Used) - shares instances of methods and objects.

Provider (Commonly Used like Configurable Factory) - shares methods & objects but allows configuration.

Constant (Commonly Used) - shares the constant values within app configuration.

Factory

Factory shares methods and objects, so you returning the object with the functions as it's properties.

Factory with a few methods:

angular.module('myApp')
.factory('Products', function ProductsFactory($http) {
    return {
      query: function() {
          return $http.get('/products');
      },
      get: function(id) {
          return $http.get('/products/' + id);
      },        
      create: function(data) {          
          return $http.post('/products', data);            
      },
      update: function(data) {
          return $http.post('/products/' + data.id, data); 
      },
      delete: function(id) {
          return $http.delete('/products/' + id);
      }
    };
});

Usage:

Products.create(data);

Functional Factory with only one method:

angular.module('myApp')
.factory('Gravatar', function GravatarFactory($http) {
    var avatarSize = 80;
    var avatarUrl = "http://www.gravatar.com/avatar/";

    return function(email) {
        return avatarUrl + CryptoJS.MD5(email) + "?size" + avatarSize.toString();
    };
});

Usage:

Gravatar(email);

Note: It's easier to debug if your factory function is named as your [FactoryName] + "Factory"

Provider

Providers run before everything.
It, allows to specify the configuration via .config(fuction(someProvider){/*...*/}) method. It also means that you thing that you can inject into them it's other provides.

All providers define this.$get <factory function>. So, now you have to inject services in the $get function & return an object.

Factory is just a syntactic sugar over your Provider.
When we define a factory an empty provider with the $get method set to your <factory function> is automatically created under the hood.

Let's convert our previously created factory into provider:

angular.module('myApp')
.provider('Gravatar', function GravatarProvider($http) {
    var avatarSize = 80;
    var avatarUrl = "http://www.gravatar.com/avatar/";
    
    this.setOptions = function (opts){
       avatarSize = opts.size; 
       avatarUrl = opts.url; 
    };

    this.$get = function(email) {
        return avatarUrl + CryptoJS.MD5(email) + "?size" + avatarSize.toString();
    };
});

Note: into your $get method you can return some object with multiple functions as well as we did with Products factory.

Usage:

Gravatar(email);

Configuring:

.config(function (GravatarPovider) {
    GravatarPovider.setOptions({
        size: 80,
        url: "http://www.gravatar.com/avatar/"
    });
})

Note: you have to pass the <function name> (not just provider name) into the config function otherwise it won't work.

angular.module('myApp')
.provider('Products', function ProductsProvider() {
 this.$get = function($http) {
    return {
      query: function() {
          return $http.get('/products');
      },
      get: function(id) {
          return $http.get('/products/' + id);
      },        
      create: function(data) {          
          return $http.post('/products', data);            
      },
      update: function(data) {
          return $http.post('/products/' + data.id, data); 
      },
      delete: function(id) {
          return $http.delete('/products/' + id);
      }
    };
  };
});

Service

Unlike Factory (that invokes methods) Service returns new instances of methods and objects, that's why it's rarely used. Other words each time u're declaring serviceName as an injectable argument you will be provided with the new instance function:

myInjectedService  <----  new myServiceFunction()

Let's convert our Factory into the Service:

 angular.module('myApp')
.provider('Products', function ProductsService() {
      this.query = function() {
          return $http.get('/products');
      }
      this.get = function(id) {
          return $http.get('/products/' + id);
      }        
      this.create = function(data) {          
          return $http.post('/products', data);            
      }
      this.update = function(data) {
          return $http.post('/products/' + data.id, data); 
      }
      this.delete = function(id) {
          return $http.delete('/products/' + id);
      }
    };
  };
});

Let's make some trick & convert our Service back to Factory, but with Service-like declarations:

angular.module('myApp')
.factory('Products', function ProductsFactory() {
      var service = {};
      service.query = function() {
          return $http.get('/products');
      }
      service.get = function(id) {
          return $http.get('/products/' + id);
      }        
      service.create = function(data) {          
          return $http.post('/products', data);            
      }
      service.update = function(data) {
          return $http.post('/products/' + data.id, data); 
      }
      service.delete = function(id) {
          return $http.delete('/products/' + id);
      }
      return service;
    };
  };
});

Constant

Constant it's a cool way to keep your app Enum like entities & values:

angular.module('myApp')
.constant('AppEnum', {
    BookGenre: {
        FICTION: {name: 'Fiction'},
        DRAMA: {name: 'Drama'},
        ROMANS: {name: 'Romans'}
    }
});

Usage:

AppEnum.BookGenre.FICTION;

Bloom Lab

Pages

Thursday, October 29, 2015

Keynote: AngularJS Services

Angular JS

Factory

Provider

Service

Constant

see Also

1 comment: