Sharing data between controllers in Angular JS?

Question

Before this is marked as duplicate I've read quite of few similar questions, but all the answers I've found seem to use $scope, and after reading the documentation I'm not really sure I understand $scope, or why I'd use it in this situation.

I found this tutorial which describes how to do what I'm trying to do.

However, it's using an array of data. I just need one solid variable. In addition, I don't know why he's declaring an additional object to the factory service he creates; why not just use the factory as the object?

I was thinking I could do something like this, but I'm not sure if it will work or not.

Creating my factory/service:

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

demoModule.factory("demoService", function() {
     var demoSharedVariable = null;
     return demoSharedVariable;
});

Accessing the shared variable in each controller:

var demoControllerOne = demoModule.controller("demoContollerOne", function(demoSharedVariable) {
     this.oneFunction = function(oneInput){
          demoSharedVariable = oneInput;
     };
});

var demoControllerTwo = demoModule.controller("demoContollerTwo", function(demoSharedVariable) {
     this.twoFunction = function(twoInput){
          demoSharedVariable = twoInput;
     };
});

Will this method produced the shared variable I'm after?

Answer 1

You need to inject the service in order to use it, then access the service variable.

demoModule.controller("demoContollerOne", function($scope, demoService) {
  $scope.oneFunction = function(){
    demoService.demoSharedVariable = $scope.oneInput;
  };
});

demoModule.controller("demoContollerTwo", function($scope, demoService) {
  $scope.twoFunction = function(){
    demoService.demoSharedVariable = $scope.twoInput;
  };
});

If you are using controllerAs, you rarely (or shouldn't) need to inject and use $scope. As controllerAs is a relatively newer feature, back then we have no choice but to use $scope, so it is not strange to find example with $scope.

---

Edit: If you are not using controllerAs (like in this example) you would need $scope to expose functions or variables to the view.

There are several place that are not correct I've found while fiddling with it, I'll edit the code. I don't know how to showcase the effect without using advanced concept like $watch, please provide your own fiddle if you don't understand.

Jsbin

Answer 2

One important thing is if you want to use angular, you have to understand the knowledge of scope.

Since neither you factory or controller is correct, i write a simple example for you to help you understand the service:

detail implementation in this plnkr :

service:

angular.module('myApp').service('MyService', [function() {

      var yourSharedVariable; // Your shared variable

      //Provide the setter and getter methods
      this.setSharedVariable = function (newVal) {
        yourSharedVariable = newVal;
      };

      this.getSharedVariable = function () {
        return yourSharedVariable;
      };

    }
]);

controller:

myApp.controller('Ctrl2', ['$scope', 'MyService', '$window', function($scope, MyService, $window) {//inject MyService into the controller
    $scope.setShared = function(val) {
      MyService.setSharedVariable(val);
    };

    $scope.getShared = function() {
      return MyService.getSharedVariable();
    };

    $scope.alertSharedVariable = function () {
      $window.alert(MyService.getSharedVariable());
    };

}]);