Keynote: AngularJS Services

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; ---- ## see Also * [Keynote: AngularJS Filters](http://bloomlab.blogspot.com.ee/2015/10/ketnote-angularjs-filters.html) * [Keynote: AngularJS Routing](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-routing.html) * [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html) * [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html) * [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html) * [AngularJS - API](https://docs.angularjs.org/api/ng) * [AngularJS - Developer Documentation](https://docs.angularjs.org/guide) * [Tutorials Point - AngularJS](http://www.tutorialspoint.com/angularjs/angularjs_services.htm) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)