Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I define constructor in service and factory in Angular?

Tags:

angularjs

i am little bit familiar with angular. still on learning process. working with ng version 1.4.8. so i like to know how could i define constructor function in service and factory.

here is one sample service .now tell me how to define constructor in service or factory ?

angular.module('myApp').service('helloService',function($timeout){
  this.sayHello=function(name){
    $timeout(function(){
      alert('Hello '+name);
    },2000);
  }
});

angular.module('myApp').controller('TestController',
  function(helloService){
  helloService.sayHello('AngularJS'); // Alerts Hello AngularJS
});
like image 836
Monojit Sarkar Avatar asked Jun 12 '17 12:06

Monojit Sarkar


People also ask

What is the difference between a service () and a Factory ()?

factory() is a method that takes a name and function that are injected in the same way as in service. The major difference between an AngularJS service and an AngularJS factory is that a service is a constructor function and a factory is not.

What goes in the constructor in Angular?

Constructor in Angular is put into use to inject dependencies into the component class. It creates a new instance of the class when the compiler calls 'new MyClass ()'. While calling 'new MyClass()', it is vital that the exact match of the parameter passes the Angular component constructor of the class.

What is class and constructor in Angular?

A class is a blueprint for creating an object, we call that created object an instance of a class, or a class instance or just instance for short. We instantiate a class by using the new keyword and when that happens JavaScript calls the constructor function.

What is service Factory and provider in Angular?

An AngularJS service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get , which holds the service factory function.


1 Answers

The function you pass to .service gets called with new, thus it is already basically a constructor. It is a "constructor function" and it implicitly returns an object, which is the singleton:

angular.module('myApp').service('helloService',function($timeout){
  // This constructor function implicitly returns an object. It is called
  // only once by Angular to create a singleton.

  this.sayHello = function(name) {
    // etc
  }
});

Just to illustrate, if you passed an ES6 class to .service (which does have a constructor) instead of a constructor function, that constructor would be called when the singleton is created:

class HelloService {
    constructor($timeout) {
        // Called once when the singleton is created
    }

     sayHello(name) {
         // etc
     }
}

angular.module('myApp').service('helloService', HelloService);

Using .factory is similar, but it doesn't get called with new. So the function you use in this case has to return a singleton object explicitly:

angular.module('myApp').factory('helloService',function($timeout){
  // This factory function explicitly returns an object. It is called
  // only once by Angular to create a singleton.

  return {
      sayHello: function(name) {
          // etc
      }
  };
});

Edit: As mentioned by @Vladimir Zdenek, these "constructors" cannot be used to configure the singleton externally. However, I interpreted the question to mean "Where can I put code that runs when the singleton is created?". Singletons may need to initialize data, so that initialization can go in the "constructor".

like image 143
Frank Modica Avatar answered Oct 13 '22 01:10

Frank Modica