Access to multiple variables / obj / funcs, etc. inside service
I am very inexperienced with corners. I am trying to implement a service to access data through controllers. I used this example.
Below is my js. I haven't posted my HTML because I'm just trying to get the logic working in 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 great. I use 22222 protocol every time I access both controllers. I can update var and it updates perfectly between controllers. If I replace return {testVar : '22222'}
with
return {
testVar : { x : '22222' }
}
Then I get a x : '2222'
console login object . Which seems fine again.
The thing is, I can't figure out the usage TestService.testVar
in the console log. At first glance, I thought it was maintaining var testVar from TestService. However, looking at the example, it is obvious that testVar in this case is actually a key, and the return value is a key value.
Is this the only way to return something from the service as a key value?
I want to use a service to access multiple values / objects, etc. inside a service, but using return in the example only returns one variable; if I don't use if statements, but it's a bit like the top, and as if I'm really missing something with the 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 is more complicated than what I am asking for.
source to share
First iteration
We can use service / factory to store information and find 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 a service / factory to exchange information 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;
});
Note that Im returing object someObject
and the rest is done by Angular diggest.
jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/aomL09fd/1/
source to share