Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When is an AngularJS service re-initialized?

What is the lifecycle of a service (or factory) in angularjs and when is it re-initialzed ?

like image 460
vjain27 Avatar asked Aug 05 '15 18:08

vjain27


People also ask

Are AngularJS services singletons?

The main objective of angular services is to share data across Angular application. Practically an angular service can be shared between all the components or can be limited to some component. Hence Angular service can be a singleton as well as non-singleton in nature.

What is the service in AngularJS?

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application. AngularJS has about 30 built-in services. One of them is the $location service.

What are services in AngularJS Mcq?

A - Services are singleton objects which are instantiated only once in app and are used to do the defined task. B - Services are objects which AngularJS uses internally.


1 Answers

When Angular bootstraps, it attaches the constructor functions for services to the associated module. This happens once.

angular
  .module('myApp')
  .service('User', function UserConstructor() {
    // stuff
  });

When a you try to run a controller or something that depends on a certain service, Angular will inject it for you.

app.controller('FirstCtrl', function FirstCtrlConstructor(User) {
  // User is available here
});

Under the hood, angular uses this thing called $injector to do dependency injection for you. It works something like this:

var $injector = {};
$injector.cached = [];
$injector.get = function(service) {
  // check if service is in this.cached
    // if so, return it
    // if not
      // 1) instantiate the service
      // 2) store it in this.cached
      // 3) return it
};

So when Angular sees that it needs to inject User into FirstCtrlConstructor, it calls $injector.get('User') to get the User. Since it hasn't injected User anywhere else before, it'll hit the "if not" condition and:

  1. Call new User().
  2. Store it in $injector.cached for next time.
  3. Return it.

Now let's say that we need to inject User a second time:

app.controller('SecondCtrl', function SecondCtrlConstructor(User) {
  // stuff
});

Again, when Angular sees that SecondCtrlConstructor depends on User, it calls $injector.get('User') to get the User so it could inject it. This time, it hits the "if so" condition. Since we previously put User in $injector.cached, it found it there for us. Thus, User doesn't get instantiated again.

Say we have a ThirdCtrl that also depends on User. It too would find it in $injector.cached, and so it wouldn't instantiate UserConstructor. Say that we have myDirective that depends on User. The same thing would happen - it'd find it in $injector.cached and thus wouldn't instantiate it.

This is called the Singleton pattern. It's used when you don't want to instantiate something more than once. Angular uses this for services so they don't get instantiated more than once. The same is true for factories (and probably also true for providers; probably not true for values and constants).

See https://medium.com/@adamzerner/dependency-injection-in-angular-18490a9a934 for some more info.

like image 74
Adam Zerner Avatar answered Sep 27 '22 20:09

Adam Zerner