Angularjs Service Injection Issue

Question

I'm trying to add a service to my Angular project for the first time and running into issues injecting it within my controller.

I am getting an error of -- TypeError: Cannot read property 'get' of undefined

I'm looking to properly inject the service into the controller and ways I can improve the code for best practices/efficiency. Thanks for the help!

I have a folder /event in my angular project with the following files --

app.js controllers.js directives.js services.js

app.js file has --

'use strict';

angular.module('vyrt.event', [
  'vyrt.event.controllers',
  'vyrt.event.services',
  'vyrt.event.directives'
]);

services.js file has --

'use strict';

angular.module('vyrt.event.services', []).
service('VyrtEventService', ['$http', function($http) {
var artistId = 0,
  artist = '',
  events = [],
  active_event_idx = 0;

  this.get = function(artistId) {
    var url = '/api/users/' + artistId + '/';
    $http.get(url).success(function(data, status, headers, config) {
      artist = data.artist.user;
      events = data.artist.events;
      active_event_id = data.artist.events[0].id;
    });
    return artist, events, active_event_id;
  }
}]);

finally, the controller has --

'use strict';

angular.module('vyrt.event.controllers', []).
controller('VyrtEventCtrl', ['$scope', function($scope, VyrtEventService) {

  console.log(VyrtEventService.get($scope.artistId));

  $scope.activeCampaign = function(idx) {
    if (idx == VyrtEventService.active_event_idx) return true;
    return false;
  };
}]);

there is no benefit in creating a module just to create a service. Modules are usually used to group features together. Also you can't return data from a function that makes asynchronous call to get that data — charlietfl
– charlietfl, Commented Jul 19, 2015 at 22:56
thanks for the tips! in this case, we are grouping features together. — Yasir
– Yasir, Commented Jul 19, 2015 at 23:07
making extra modules just for the sake of it is just extra needless work such as angular.module('vyrt.event.controllers', []). A new module is not needed fro every component — charlietfl
– charlietfl, Commented Jul 19, 2015 at 23:11

Matt Herbstritt · Accepted Answer · 2015-07-20 00:23:23Z

3

The problem is that you've forgotten to put 'VyrtEventService' in your dependency list when you define you controller:

.controller('VyrtEventCtrl', ['$scope', /* you need this ==>*/ 'VyrtEventService', function($scope, VyrtEventService) {

    console.log('VyrtEventService', VyrtEventService);


    $scope.activeCampaign = function(idx) {
      if (idx == VyrtEventService.active_event_idx) return true;
      return false;
    };
  }]);

Update

Your get() function has a couple of issues. First, you need to return the $http.get() call itself and then you can call then() in your controller and set the results to a property on your $scope there. Second, you can't return multiple values like that. You would have to return an array of values or an object with your desired values assigned to it.

service

this.get = function(artistId) {
    var url = '/api/users/' + artistId + '/';

    return $http
        .get(url)
        .catch(function(error){
            // handle errors here
            console.log('Error fething artist data: ', error);
        });
  }

controller

VyrtEventService
    .get(artistId)
    .then(function(data){
        $scope.artist = data.artist.user;
        $scope.events = data.artist.events;
        $scope.active_event_id = data.artist.events[0].id;
    });

$scope.activeCampaign = function(idx) {
    return (idx == $scope.active_event_idx);
};

edited Jul 20, 2015 at 0:23

answered Jul 19, 2015 at 23:32

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

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

2 Comments

Yasir Over a year ago

looks like i have a couple issues. now the issue seems to be returning the values of artist, events from the get api call to the controller

Matt Herbstritt Over a year ago

Yes you need to return the $http call itself and then set the results in your controller. I will update hold on.

Collectives™ on Stack Overflow

Angularjs Service Injection Issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related