CODEWITHSUNDEEP
javascriptangularjsangular-services
Yasir
Yasir

Reputation: 909

Angularjs Service Injection Issue

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;
  };
}]);

Upvotes: 1

Views: 332

Answers (1)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

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);
};

Upvotes: 3

Related Questions