How to access an object attribute inside a service in AngularJS?

Question

I have a service with a local variable object with events names:

 myApp.service('appService', ['$rootScope', function ($rootScope) { var events = { firstEvent: "MyFirstEvent", secondEvent: "MySecondEvent" }; this.doEvent = function(eventName) { // do something... }; }]); 

Now I am trying to read events.firstEvent inside a controller:

myApp.controller('myController', ['$scope', 'appervice', function ($scope, appService) { var mydata = appService.events.firstEvent; }]); 

The problem I get this error in console:

TypeError: Cannot read property 'firstEvent' of undefined 

What I'm doing wrong?

P.S. I also can not access the function doEvent().

Answer 1

You service returns this, but you didn't put anything in there!

myApp.service('appService', ['$rootScope', function ($rootScope) { var events = { firstEvent: "MyFirstEvent", secondEvent: "MySecondEvent" }; return { events:events}; }]); 

this will return an obeject with the events in it!

Answer 2

Angular executes services function when loading it, you need to return that you need from this function.

myApp.service('appService', ['$rootScope', function ($rootScope) { var events = { firstEvent: "MyFirstEvent", secondEvent: "MySecondEvent" }; return events; }]); myApp.controller('myController', ['$scope', 'appervice', function ($scope, appService) { var mydata = appService.firstEvent; }]); 

Answer 3

You can write

function MyService($rootScope){ var _this = {}; _this.events = { firstEvent: 'blabla1', secondEvent: 'blabla2' }; return _this; } myApp.service('appService', ['$rootScope', MyService]); 

and after that

myApp.controller('myController', ['$scope', 'appService', function ($scope, appService) { var mydata = appService.events.firstEvent; }]);