3

I am trying to use the same service for different modules. There are many modules so i tried to inject them in a parent module. Something like this:

var app=angular.module('myapp',['module_1','module_2',....,'module_n']);


var module_1=angular.module('myapp1',[]);
var module_2=angular.module('myapp2',[]);
var module_3=angular.module('myapp3',[]);
.
.
.
var module_n=angular.module('myappN',[]);

and the service which is common to all the n modules is like this:

.service('myService',function(){
...doing something here...
});

Now I am not able to figure out how to use this service for all the submodules.
With which module should I associate this service ?
I tried doing app.service('myService',function(){...}), but it did'nt work.
Where am I going wrong?

EDIT 1:
Moreover I am trying to share a variable with all these submodules using the service. I am not sure if, I am doing the right thing by using a service for sharing variable or should I use a Provider or Factory for this job.

EDIT 2:
I found these links, but I could not grasp the answer. Refer to them and please provide my answer
How to share a variable between multiple modules in AngularJS
Passing variable between controllers which are on different modules

1

1 Answer 1

0

Lets suppose you want to build a Service to share a certain variable between two Controllers. You should be able to use your Service doing the following:

MyService.js

// Lets suppose you want to share a certain variable between controllers
angular
.module('myApp')
.service('myService', function () {

  // If you wish you can inject and use $scope
  var vm = this;
  // Variable to share
  vm.sharedItem;

  // Method to set a certain value into a variable
  function setItem(item){
   vm.sharedItem = item;
  }

  // Method to get that variable
  function getItem(){
    return vm.sharedItem;
  }

  // Exposing your methods
  return {
    setItem     : setItem
    getItem     : getItem
  }
});

SetController.js

angular
.module('myApp')
.controller('SetController', SetController);

  // Inject your Service
  function SetController(myService) {

    var vm = this;
    // variable used to set the value
    vm.setMe = 'hello';

    // Call `setItem()` method from `myService` -> sharedItem will get setMe value
    myService.setItem(vm.setMe);

    console.log("Set shared item "+vm.setMe);
  };

GetController.js:

angular
.module('myApp')
.controller('GetController', GetController);

  // Inject your Service
  function SetController(myService) {

    var vm = this;
    // variable used to get shared the value
    vm.getMe= null;

    /* Call `getItem()` method from `myService` to get the shared 
     * value and assign it to `getMe`*/
    vm.getMe = myService.getItem();

    console.log("Got shared item "+vm.getMe);
};

I remind you can access this.var in your view using controllerName.var. It is a good solution to make sure you are using a certain controller. You can always use $scope if you wish.

I hope I've been helpful.

Sign up to request clarification or add additional context in comments.

3 Comments

very well said. But my doubt is, how to share myService to the controllers, when they are in different modules? What i have researched draws me towards making a parent module whose dependencies are the modules which need to share the common myService.Make the service a part of parent module and then inject the service in those child modules. But i am not sure how exactly to execute it
Why don't you just inject the service into the childs?
I tried to do the same, although I was successful in using the service but was still not able to share the variable in those child modules, using that service.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.