Thursday, 7 January 2016

$provide service in angular js and there usages along with methods Factory, Service, Provider, Decorator, Value, Constant explanation

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

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) {
  } );

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

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


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) {
               $ + " (because of  "+ cause + "  )");

 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=;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();


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=;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(); });

Register in to $injector, such as string, number, array, object or function, it cant be injected as module, can be override by 

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


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',[]);

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


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