CODEWITHSUNDEEP
javascriptangularjs
romand
romand

Reputation: 29

AngularJS Calling service from inside service - service is not defined

I'm new to AngularJS ( learning from Udemy course ). I'm trying to separate functions by use ( kinda like classes in Java ), so I use more than one service. Somehow calls from controller work, but calls from another service rendering

"HelperFunctions is not defined

at Object.groceryService.getNewId (app.js:57)"

error.

The line it refers is inside the "GroceryService":

var maxID = HelperFunctions.findMaxID(groceryService.groceryItems);

while the following line works fine, as long as it's in the controller:

console.log(HelperFunctions.test);

My code for reference:

var app = angular.module('groceryListApp', ["ngRoute"]);

app.controller("GroceryListItemsController", ["$scope", "$routeParams", "$location", "GroceryService", "HelperFunctions", function($scope, $routeParams, $location, GroceryService, HelperFunctions){
    $scope.groceryItems = GroceryService.groceryItems;
    console.log(HelperFunctions.test);
    $scope.groceryItem = { id:7, completed:true, itemName: "cheese", date: new Date() };
    
    $scope.save = function(){
        GroceryService.save($scope.groceryItem);
        $location.path("/");
    }
}]);


app.service("HelperFunctions", function(){
    var findMax = {};
    findMax.test = 7;
    findMax.findMaxID = function(arrayOfGroceries){
        var max = -1;
        for(i=0;i<arrayOfGroceries.length;i++)
        {
            if(arrayOfGroceries[i]>max)
            {
                max = arrayOfGroceries[i].id;
            }
        }
        console.log("a");
        return max;
    }
    return findMax;
    });



app.service("GroceryService", function(){
    var groceryService = {};
    groceryService.groceryItems= [
        {id: 1, completed: true, itemName: 'milk', date: '2014-10-01'}, {id: 2, completed: true, itemName: 'cookies', date: '2014-10-01'},
        {id: 3, completed: true, itemName: 'ice cream', date: '2014-10-02'}, {id: 4, completed: true, itemName: 'potatoes', date: '2014-10-02'},
        {id: 5, completed: true, itemName: 'cereal', date: '2014-10-03'}, {id: 6, completed: true, itemName: 'bread', date: '2014-10-03'},
        {id: 7, completed: true, itemName: 'eggs', date: '2014-10-04'}, {id: 8, completed: true, itemName: 'tortillas', date: '2014-10-04'}     ]

    groceryService.getNewId = function(){
        if(groceryService.newId){
            groceryService.newId++;
            console.log("A" + groceryService.newId);
            return groceryService.newId;
        }
        else{
            var maxID = HelperFunctions.findMaxID(groceryService.groceryItems);
            groceryService.newId = maxID + 1;
            console.log("B" + groceryService.newId);
            return groceryService.newId;
        }
    }
    groceryService.save = function(entry){
        entry.id = groceryService.getNewId();
        groceryService.groceryItems.push(entry);
    };

    return groceryService;
});

There is also routing after this, but I figured that it's irrelevant, right?

Upvotes: 0

Views: 95

Answers (1)

bazzells
bazzells

Reputation: 329

HelperFunctions is not defined because you haven't injected it into GroceryService.

This post should lead you in the right direction: Injecting a service into another service in angularJS.

Upvotes: 1

Related Questions