Sunday 5 June 2016

Detail information on $provide service and there usages along with methods Factory, Service, Provider, Decorator, Value, Constant explanation in Angular Js

In this post we are going to see the $provide service in angular Js, actually what is the $provide service where it is used in angular js, How we can use it in our application

$provide is a service which is used register the components with the $injector

Below statement is a reference from the Angular Website: 
An angular Service is a singleton object created by a ServiceFactory,
ServiceFactory are functions which are created by a ServiceProvider
ServiceProvider are constructor functions must have $get property which holds the ServiceFactory.

so from above statement we came to know that service is created by combination of ServiceFactory, which is holds inside the ServiceProvider $get property.

factory(fn)  - register a factory function, wrapped in a serviceprovider, $get  property contains a fn
service(class) - register a constructor function wrapped in a serviceprovider, $get property instantiate the new object
provider(provider) - register a service provider with $injector
value(obj)   -  register a name/value, access by service, not providers
constant(obj)   - register a name/value, access by service ,providers

Methods Present in the $provide
**************************************

Provider:
provider(name,provider)
Service provider name starts with the name of the service + 'Provider', like $routeProvider, $logProvider

name =  name of the provider
provider = it may be function or object  , 

 if it is a function , then it must be a constructor function $injector.instantiate() will be invoked when an instance needs to be created

if it is a object then it must have a $get method, $get will be invoked using $injector.invoke() when an  instance needs to be created



   var app = angular.module('app', []);


  app.provider('Database', function () {
    var prop = {
        ConnectionString: ""
    }

    return {
        setConnectionString: function (data) {
            prop.ConnectionString = data;
        },
        $get: function () {
            return ({
                ConnectionString: function () {
                    return (prop.ConnectionString);
                }
            });
        }
    }

  });



  app.config(function (DatabaseProvider) {
    DatabaseProvider.setConnectionString("Server=local;Username=Rajesh;pwd=******");
  } );


  app.controller('main', function ($scope, Database) {

    $scope.Title = "Sample Angular Application";   
    $scope.providerString = Database.ConnectionString();

  });





 Decorator:
 decorator(name,decorator)
This is used to override or modify the service implementation , this is called by $injector.invoke() , it must have one parameter $delegate which the actual implementation of the function, if we want we can use it  by executing it.

   var app = angular.module('app',[]);
    app.config(function ($provide) {
       $provide.decorator("$exceptionHandler",['$delegate','$log',function ($delegate,$log) {
           return function (exception, cause) {
               $delegate(exception,cause);
               $log.info(exception.message + " (because of  "+ cause + "  )");
           }
       }]);
    });




Factory:
factory(name,$getFn) 
 Factory is a alternate way of creating objects once we create a Factory, we can use it in the controllers or in the another Factory through dependency injection.

  var app = angular.module('app', []);
  app.factory('DBFactory', function () {

    return {
        ConnectionString: function () {
            return "DataSource=233.44.1.3;Username=rajesh;Password=Pass12#";
        },
        GetData: function () {
            return [{ name: 'Rajesh', Id: 1 }, { name: 'Ramu', Id: 2 }];
        }
    }

  });

  app.controller('main', function ($scope, DBFactory) {

    $scope.Title = "Sample Angular Application";  
    $scope.Fstring = DBFactory.ConnectionString();

   });



Service:
service(name,constructor)
register a service with the $injector, which can be invoked by new to create a instance.Service is a singleton object in Angular.

  var app = angular.module('app', []);

  app.service('DBService', function () {

    this.ConnectionString = function () {
        return "DataSource=123.23.2.11;Username=rajesh;Password=pass12*";
    }

    this.Login = function (username, password) {
        if (username == "Rajesh") {
            return true;
        }
        else {
            return false;
        }
    }

  });

app.controller('main', function ($scope, DBService) { $scope.Title = "Sample Angular Application"; $scope.Cstring = DBService.ConnectionString(); });




Value:
value(name,value)
Register in to $injector, such as string, number, array, object or function, it cant be injected as module, can be override by 
decorator.

   var app = angular.module('app',[]);

    app.value('Movie','Batman');




Constant:
constant(name,value)
Register in to $injector, such as string, number, array, object or function, it can be injected as module, but can be override by decorator

   var app = angular.module('app',[]);
    app.constant('Application',{
        Version:'1.0.0',
        Name:'Angular'
    }); 




Below table will list out the options that which options are possible and not possible

ProviderSingletonInstanceConfig
ProviderYesYesYes
DecoratorYesNoNo
ServiceYesNoNo
FactoryYesYesNo
ConstantYesNoNo
ValueYesNoNo





From this post you can see the methods present in the $provide  and as well as the functionalities of $provide service

No comments:

Post a Comment