accessing multiple variables / obj / funcs etc within a service

Question

I am very inexperienced with angularjs. I am trying to implement a service to access data across controllers. I used this example.

Below is my js. I haven't posted my HTML because I am just trying to get the logic working within the js first.

angular.module('App')
    .factory('TestService', function() {
        return {testVar : '22222'}
    })

    .controller('MainCtrl', function (TestService) {
        console.log(TestService.testVar);
    }
    .controller('SecCtrl', function (TestService) {
        console.log(TestService.testVar);
    }

This works fine. I console log '22222' each time I access both controllers. I can update the var and it is updated fine between controllers. If I replace return {testVar : '22222'} with

return {
   testVar : { x : '22222' }
}

Then I get the object x : '2222' logged to console. Which again seems fine.

The thing is I can't really understand the usage of TestService.testVar in the console log. At first glance I thought it was logging the var testVar from service TestService. From looking at the example however, it is apparent that testVar in this case is actually a key and what is returned is the key value.

Is this the only way to return something from a service, as the key value?

I wish to use the service to access multiple values/objects etc within the service but the use of return in the example only returns the one variable obviously; unless I use if statements, but that seems a little over the top and like I'm really missing something with the use of controllers...

Something like;

angular.module('App')
    .factory('TestService', function() {
        (..code to choose what to return but the proper way...)
        return {testVar : '22222'}
        return {testVar2 : '333333'}
    })

    .controller('MainCtrl', function (TestService) {
        console.log(TestService.testVar);
        console.log(TestService.testVar2);
    }
    .controller('SecCtrl', function (TestService) {
        console.log(TestService.testVar);
        console.log(TestService.testVar2);
    }

I looked at this question, but i think it's more complicated than what I am asking.

@krzysztof thanks, this works. But if I have many variables within the services I wish to access, does that mean I always have to return ALL the keys each time? Seems inefficient — myol, Aug 07 '14 at 09:50
@myol, no, I will improve my answer to show other possibilities — Krzysztof Safjanowski, Aug 07 '14 at 09:52

Krzysztof Safjanowski · Accepted Answer · 2014-08-07T10:05:46.263

First iteration

We can use service/factory to store infromation and retrive it in controllers.

angular.module('app', []).service('testService', function() {
    var testService = {};
    testService.x = 'x';
    testService.y = 'y';
    return testService;
}).controller('firstCtrl', function($scope, testService) {
    $scope.x = testService.x;
    $scope.y = testService.y;
}).controller('secondCtrl', function($scope, testService) {
    $scope.x = testService.x;
    $scope.y = testService.y;
});

jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/aomL09fd/

Second iteration

We can use service/factory to share infromation between controllers.

angular.module('app', []).service('testService', function() {
    var testService = {
        someObject: {
            x: 'x',
            y: 'y',
            z: ''
        }
    };
    return testService;
}).controller('firstCtrl', function($scope, testService) {
    $scope.someObject = testService.someObject;
}).controller('secondCtrl', function($scope, testService) {
    $scope.someObject = testService.someObject;
});

Please take a look that I’m returing object someObject and rest is made by Angular diggest.

jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/aomL09fd/1/

Thanks. I still don't quite understand the use of controllers completely, but this gives me a much more solid base to work off. — myol, Aug 07 '14 at 10:00

score 0 · Answer 2 · edited Aug 07 '14 at 10:06

0

You can try the following:

angular.module('App')
    .factory('TestService', function() {
        // Code to choose what to return but the proper way
        return {testVar2 : '333333', testVar : '22222'}
    })

edited Aug 07 '14 at 10:06

Liam George Betsworth

17,558
5
37
42

answered Aug 07 '14 at 09:55

user3917789

90
4

accessing multiple variables / obj / funcs etc within a service

2 Answers2

First iteration

Second iteration