Angularjs

Ashish Singh

aitashish173@gmail.com

  @ashishait

    @ashish173

Services, providers & factories

Services

• Recipes for making development easy
• Api is defined by developer 
• Objects Instantiated and wired together for the app to work
• Initialized only once after that reference is used in the app.

Naming

• Its messed up....
• General name 'service'
• Yet a service is named 'service'
• Angular team has apologized for it.

Value recipe

Simple values for applications

Can be injected throughout the application

Value recipe

angular.module('nuclearApp')

nuclearApp.value('radiationLevel', '2.5677788');

nuclearApp.controller('ExplodeCtrl', ['radationLevel', 
    function ExplodeCtrl(radiationLevel) {
  
    console.log('Radiation level', radiationlevel);
    // 2.5677788
}]);

Initialization

Use

Factory recipe

• Gives us the function's return value ie. You just create an object, add properties to it, then return that same object

• Singleton

• Reusable components

• Can use other dependencies

• Usually used when the service instance requires complex creation logic

• Used for non configurable services

• If you're using an object, you could use the factory provider.

Factory recipe

myApp.factory('NukeBomb', function(){
    var factory = {};

    return factory;

    factory = {
        triggerIgnition: function(){
            return 'Bomb triggered';
        }
    }
});

nuclearApp.controller('ExplodeCtrl', ['NukeBomb', 
    function ExplodeCtrl(NukeBomb) {
  
    NukeBomb.triggerIgnition();

}]);

Initialization

Use

Service recipe

• Gives us the instance of a function (object)- instantiated with the ‘new’ keyword and you’ll add properties to ‘this’ and the service will return ‘this’

• Singleton and will only be created once

• Reusable components

• Dependencies are injected as constructor arguments

• Used for simple creation logic

• If you're using a class you could use the service provider

Service recipe

myApp.service('NukeBomb', function(){
    
    this.triggerIgnition: function(){
        return 'bomb ignited';
    },

    this.drop: function(){
        return 'bomb dropped awaiting explosion';
    }
});

nuclearApp.controller('ExplodeCtrl', ['NukeBomb', 
    function ExplodeCtrl(NukeBomb) {
  
    NukeBomb.triggerIgnition();
    NukeBomb.dropBomb();

}]);

Initialization

Use

Provider recipe

• Core recipe type and all the other recipe types are just syntactic sugar on top of it.
• ​Implements a $get method.
• Use when exposing an API for application-wide configuration.
• Rethink if you end up using this in your app code.

Provider recipe

myApp.provider('NukeBomb', function(){
    
    this.codeName = "Destroy ISIS";

    this.$get = function(){
        // any init vars here

        return {
            triggerIgnition: function(){
                return 'bomb ignited';
            },
            drop: function(){
                return 'bomb dropped awaiting explosion';
            }
        }
    }

    this.setCodeName = function(codeName){
        this.codeName = codeName;
    }
    
});

Initialization

Provider recipe

// Config time use
nuclearApp.config(function(NukeBombProvider){
    NukeBombProvider.setCodeName = "Killer bomb";
});


// after run phase in controllers
nuclearApp.controller('ExplodeCtrl', ['NukeBomb', 
    function ExplodeCtrl(NukeBomb) {
  
    NukeBomb.triggerIgnition();
    NukeBomb.dropBomb();

}]);

Use

Main confusions

When to use a service or a factory?

Magic time

nuclearApp.service('NukeBomb', function(){
    
    this.triggerIgnition: function(){
        return 'bomb ignited';
    },

    this.drop: function(){
        return 'bomb dropped awaiting explosion';
    }
});

// Looks like a factory
nuclearApp.service('NukeBomb', function(){
    var killerService;
    return killerService;

    killerService = {
        triggerIgnition: function(){
            return 'bomb ignited';
        },
        drop: function(){
            return 'bomb dropped awaiting explosion';
        }
    }
});

Services can act as factories

Text

Services can act as factories and vice versa.

In angularjs you don't need factories at all services can do all magic for you.

Main distinction

Factories

While injecting you have the instance of the function. In other words new FunctionYouPassedToService()

Services

While injecting you have the value that is returned by invoking the function reference passed to module.factory

Main distinction

Factories

DI using “service”, this creates a new GLOBAL instance of the “Service” object and injects it in to the function.

Services

DI using “factory” it does not create an instance. It just passes the method and later the consumer internally has to make calls to the factory for object instances.

Use cases

• Share data b/w controllers
• Exposing api eg. library
• Common code
• Constants
• Config time initialization(Providers)

Share data b/w Ctrls

NuclearApp.factory('ConfidentialData', function () {

    var confidentialData = {
        groundZero: '',
        codeName:   ''
    };

    return {
        getGroundZero: function () {
            return confidentialData.groundZero;
        },
        setGroundZero: function (altitude) {
            confidentialData.groundZero = altitude;
        },
        getCodeName: function () {
            return confidentialData.groundZero;
        },
        setCodeName: function (name) {
            confidentialData.codeName = name;
        }
    };
});

Share data b/w Ctrls

NuclearApp.controller('FirstCtrl', function ($scope, ConfidentialData) {
    $scope.codeName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) ConfidentialData.codeName(newValue);
    });
});

Using getters/setters in Controllers

Exposing api(Library)

angular.module('ngAuth', [])
        .provider('$auth', function() {
            var config = {
                permissions:    [],
                customInit:     {}
            };
            // adding extra permission if passed by user
            this.permission = function(permissions){
                
                config.permissions.push(permissions);
                return this;
            }
            // implement $get method
            this.$get = ['$q', '$rootScope', '$window', '$http',  function($q, $rootScope, $window, $http){
                $auth = $q.defer();
    
                /* `property` object should have
                 * api_url as an attribute
                 * it will be used to make api call for login
                 */
                $auth.config = function(property){
                    if(property.api_url != undefind) {
                        config['api_url']= property.api_url;
                    }
                    return config;
                };
            }];
        };

Using providers

Common code

MyApp.service(Helper, function(){
    this.currentDate = function(){ 
       return new Date();
    };

    this.currentScore = funtion(){
       $http.get('some_url', {options})
            .$promise
            .then(function(response){
                return response.data;
            })
            .catch(function(error){
                // error occured
            });
    };

});

MyApp.controller(Ctrl1, function(Helper){
   var vm = this;

    vm.today = Helper.currentDate();
    // this helper method can be shared across multiple controllers
});

Config time init

MyApp.provider(Killer, function(){
    this.name = "Default name";

    this.$get = function(){
        var name = this.name;

        return {
            getName = function(){
                return name;
            },
            setName = function(name){
                name = name;
            }
        };
    };
});

MyApp.config('KillerProvider' function(KillerProvider){

   KillerProvider.setName('Assasin 2');
   // Above defined provider is accessible in config phase as KillerProvider
});

Conclusion

• Services and factories are both general js recipe
• They can be used as per need
• Conventionally factory -> object related tasks.
• Services -> class related tasks.
• Providers -> Exposing api

Thank you

Questions?