Angular Service Undefined

Question

In the code snippet below, I'm getting "ReferenceError: 'ShoppingListService' is undefined". I can't see what the error might be, been banging my head against it and searched for a while now, anyone have clues?

var ShoppingListApp = angular.module('ShoppingListApp', [])
ShoppingListApp.factory('ShoppingListService', ['$http', function ($http) {
    var ShoppingListService = {};
    ShoppingListService.getListItems = function () {
        return $http.get('/ShoppingList/GetListItems');
    };
    return ShoppingListService;
}]);

ShoppingListApp.controller('ShoppingListController', function ($scope) {
getItems();
function getItems() {
    ShoppingListService.getListItems() //Error occurs here
    .success(function (shoppingItems) {
        $scope.items = shoppingItems;
        console.log($scope.items);
    })
.[removed for brevity].

The error occurs in the area indicated above. Angular.js version 1.4.9.

Nix · Accepted Answer · 2016-02-10 01:50:58Z

3

In your controller definition ShoppingListController you just have one injectable called $scope you need to add a second one called ShoppingListService.

ShoppingListApp
  .controller('ShoppingListController', ShoppingListController);

ShoppingListController.$inject = ['$scope', 'ShoppingListService']; 
function ShoppingListController($scope, ShoppingListService) { 

    getItems();

    function getItems() {
        ShoppingListService
          .getListItems() //Error occurs here
          .success(onSuccess);  
    }

    function onSuccess(shoppingItems) {
        $scope.items = shoppingItems;
        console.log($scope.items);
    }
    //other code
}

edited Feb 10, 2016 at 1:50

answered Feb 10, 2016 at 1:45

Nix

58.8k31 gold badges154 silver badges206 bronze badges

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

2 Comments

Peter Joyce Over a year ago

Thank you, worked perfectly! Though it works without the ShoppingListController.$inject = ['$scope', 'ShoppingListService']; line. If you don't mind, what's the purpose of that?

Nix Over a year ago

It makes your code minification safe. It does the same thing as ShoppingListApp.factory('ShoppingListService', ['$http', function ($http){}]. Its just easier to read. @user1205100

Collectives™ on Stack Overflow

Angular Service Undefined

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