Mike
Mike

Reputation: 70

AngularJS not playing nicely with Phonegap?

I'm building an application using Phonegap and AngularJS to load the data from local JSON files.

During testing I'm hosting the files online so they are not on localhost or any other local file view.

If I go to the URL on my phone's browser, the stories load fine but when I actually upload the files to Phonegap Build and update the app on my device, no stories load.

The relevant controller is as follows:

storiesControllers.controller('StoryListCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('story/stories.json')
    .success(function(data) {
        $scope.stories = data;
    })
    .error(function() {
        alert("Error loading stories");
    });
}]);

I'm not getting the error alert so I'm assuming we're getting a success? I know angular is working too as the <!--ngView--> comment gets added to the page below an empty <div ng-view></div>, which on the desktop and the phone's browser is otherwise populated with the stories.

Is this likely to be an error with my Angular setup? Something to do with Phonegap and Angular working together or is it likely to be a syntax error in my code?

I can't find any other references of people having the same issue so I know I'm sure it's my fault, I'm just not sure where to look...

Thanks for your help and go easy one me, I'm new to both technologies!

Upvotes: 0

Views: 333

Answers (1)

Mike
Mike

Reputation: 70

OK, this is ridiculous but worth embarrassing myself for if it helps others!

The error turned out to be in my route providers and the templateUrl I was asking for. Originally it was:

when('/stories', {
    templateUrl: '/partials/stories.html',
    controller: 'StoryListCtrl'
}).

When it fact it needed to be

when('/stories', {
    templateUrl: 'partials/stories.html',
    controller: 'StoryListCtrl'
}).

The difference being the slash / before the reference to the partials folder. Whilst browers are able to understand that /partials is the same thing, my device couldn't and so I needed to remove the slash before the link to get it to work!

Upvotes: 1

Related Questions