How do I access an object in a different module in AngularJS?

Question

I have two modules:

angular.module('test1', [])
    .run(function() {
        var numbers = [1, 2, 3,4];
        // do more operations on numbers here
    });

angular.module('test2', [])
    .run(function() {
        // I want to edit or iterate over numbers here
    });

I want to be able to edit the variable numbers in the test2 module. I'm extremely new to Angular so it seems like the easiest way to do this is to put numbers in $rootscope but that doesn't seem too desirable.

What's the most idiomatic way to achieve this? Do I make numbers a .value()? Do I make it into a service? Do I make 'editor' depend on 'test' (a concept that I am still trying to grasp)?

can you provide more clarification about your problem? do you want to write an editor? — Rathma
– Rathma, Commented Jul 25, 2016 at 18:28
That's pretty much the problem. I have a var in one module that I want to acess in another module. I named the module editor because it was going to edit the numbers variable. I'll change it for less confusion. — joshualan
– joshualan, Commented Jul 25, 2016 at 18:32

Jorawar Singh · Accepted Answer · 2016-07-25 18:51:00Z

2

You need a service to pass data. Here is an example how you can try it.

var app = angular.module('app', ['access','test1','test2']);
angular.module('access', [])
    .service('accessService', function() {
        this.numbers = [1, 2, 3,4];
        // do more operations on numbers here
    });

angular.module('test1', [])
    .run(function(accessService) {
        var numbers = accessService.number;
        // do more operations on numbers here
    });

angular.module('test2', [])
    .run(function(accessService) {
       accessService.numbers.forEach(function(number){
         console.log(number)
       })
    });

answered Jul 25, 2016 at 18:51

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

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

7 Comments

joshualan Over a year ago

Thanks for the answer, Jorawar. Would setting numbers as a value of the test1 module and then just setting test1 as a dependency of test2 also work? The reason I ask this is because in this example (docs.angularjs.org/guide/module), the xmpl.service module seems to do it with the greeter value.

Jorawar Singh Over a year ago

you are wellcome!! you can accept my answer if you achieved your goal with my answer :-)

joshualan Over a year ago

I just edited my earlier comment, could you take a look?

Jorawar Singh Over a year ago

like this may be if i followed you right? :-) var app = angular.module('app', ['test1','test2']); angular.module('test1', []).value('numbers', [1,2,3,4]); angular.module('test2', ['test1']) .run(function(numbers) { console.log(numbers) // I want to edit or iterate over numbers here });

joshualan Over a year ago

Yeah, exactly like that! Which one would be better/more suited towards angular?

|

Rathma · Accepted Answer · 2016-07-25 18:47:55Z

I think that run blocks are not the place to store data, it is usually a place to do app initialization I guess.

If you have a list of numbers that you want to be used and modified by others, you can use a service that have those numbers as its property and inject that service anywhere you like, and since services are singleton everyone who accesses that service is working with one and only one object.

you can also think an directives, I have numbers in some scope, I create an editor directive that uses two-way data-binding to access and modify that property on the scope.

Hope it helps

Collectives™ on Stack Overflow

How do I access an object in a different module in AngularJS?

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related