CODEWITHSUNDEEP
angularjs
sac Dahal
sac Dahal

Reputation: 1241

Services in angularJS a small example.

I am going through a series o documentation to understand services and factories. Came across this working code.

  var app = angular.module('plunker', []);
   app.value('cnt', 7);
    app.service('foo', function(cnt) {
      this.cnt = ++cnt;
      this.inc = function(quan) {
        this.cnt += quan;
      };
    });
    app.controller('MainCtrl', function($scope, cnt, foo) {
      $scope.cnt = cnt;
      $scope.foo = foo;
      $scope.inc = function() {
        $scope.foo.inc(1); // why $scope used here
      };
    });
    app.controller('TangentCtrl', function($scope, foo) {
      $scope.jump = function() {
       foo.inc(5);  // Why $scope not used here and why it doesnot work when I add scope
      };
    });

In TangentCtrl controller $scope.jump function its not using $scope to access foo.inc as you can see in the code I have commented. I think there is some concept here that I dont understand , can anyone enlighten me to this.

Upvotes: 0

Views: 47

Answers (3)

ram1993
ram1993

Reputation: 971

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


function constructorFunction() {
  this.getData = function() {
    //bussiness logic
  };
}

/*
  * your are registering service called myService
  * service/factory uses singleton design pattern
  * i.e. you have an object called myService in app
*/
app.service('myService', constructorFunction);
/*
  * Here, you are passing sevice name (myService) and 
  * constructor Function (constructorFunction) to service
  * provider
  * which creates singleton object (myService)
*/


/*
  * angular uses injector to resolve dependencies 
  * your are actully tells injector to
  * add these dependencies to your controller function
*/
app.controller('myCtrl',function($scope, myService){
  /*
    * Here, you get $scope and myService
    * $scope and myService these are two different objects.
    * It is not yet compulsory to inject $scope if you 
    * use controllerAs syntax, good practice
  */
  //view specific logic
});

/*
  * Note: array syntax is useful in case of minification
  * ['$scope', 'foo', function($scope, foo){}]
  * angular maps minified variables with strings provided
  * to resolve dependencies.
*/

Upvotes: 1

optimus
optimus

Reputation: 729

Look this code 

 app.service('foo', function(cnt) {
  this.cnt = ++cnt;
  this.inc = function(quan) {
    this.cnt += quan;
  };
});

Image you have a class 'foo', in this class 'inc' is a function, you are exporting 'foo' as a service, in the above 'foo' can be used as a connection between two controllers to pass some data between them.

So you are just Injecting foo in 'TangentCtrl' via this line

app.controller('TangentCtrl', function($scope, foo) { ...... });

So since you can use 'foo' without $scope in front them, so foo.inc(5); will call the method inc inside foo service and thus foo can be called by other controllers to get the value.

Upvotes: 1

Paritosh
Paritosh

Reputation: 11578

That is because you have injected foo while declaring the controller

app.controller('TangentCtrl', function($scope, foo) {...}

In the controller function, you get instance of the foo service.

Ideally you should write the controller as below. So when you get instance of the service within controller itself, why you need $scope to access the inc function?

app.controller('TangentCtrl', ['$scope', 'foo', function($scope, foo) { 
    ....
}]);

Upvotes: 1

Related Questions