Search code examples
javascriptjsonangularjsfilengresource

error when reading json file using angular resource


I'm trying to use angular ngResource module to fetch data from json file but I get an error 404 on the console - the URL is being concatenated with code following the call to get function.

Here is the error:

localhost prefix/test_data/data.json/function%20(data)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20console.log(data);%20%20%20%20%20%20%20%20%7D

here is the code I'm using:

the json service -

angular.module('jsonServices',['ngResource']).factory('JsonService', 
    function ($resource) { 
    return $resource('/test_data/data.json'); 
});

the controller using the service:

angular.module('myApp.controllers')
.controller('mainController', function ($scope, JsonService) {
        JsonService.get(function (data) {
            console.log(data);
        });
});

the app js that starts it all:

angular.module('myApp',['myApp.controllers','jsonServices','ui.router'])
.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('home',{
        url:'/home',
        template:'some template path goes here',
        controller:'mainController'
    };
});

As you can see the "function(data)" is being added to the url as a string. one more thing is when I try to access the json file browsing to its location I can see the content of the json file OK.

Does anyone got this problem before and find a way to solve it? Is there something I'm doing wrong or missing here?

Thanks,

Eran


Solution

  • Found the problem, it seems that I used a bower package call ng-resource instead of angular-resource.