Angular $http not resolving in $routeProvider

Question

I am trying to display data from a JSON file onto the webpage. My Code

angular.module('bioA.configs',['ngRoute'])
//Config routes
.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/',
    {
        templateUrl: 'list.tpl.html',
        controller: 'BioACtrl',
        resolve: {
            bioAList: ['$http',function($http){
                return $http.get('bioa.json');
            }]
        }
    });
}]);
//Controller to Manage the data
angular.module('bioA.controllers',['bioA.configs'])
.controller('BioACtrl',['bioAList','$scope',function($scope,bioAList){
    console.log(bioAList);
    $scope.samples = bioAList.data.samples;
}]);
angular.module('bioA',['ngRoute','bioA.controllers','bioA.configs','ui.bootstrap']);

The $http doesnt seem to resolve. here is the console output: I am AngularJS noob any help is appreciated :) I am stuck. Why is the resolved object a ChildScope rather than being a promise ?

from your error you get undefined samples but not data. Sounds like bioAList has been created but there is now data — Maxim Shoustin
– Maxim Shoustin, Commented Mar 7, 2014 at 22:41
this seems to be an async request so you need to listen for a success or failure not just return $http.get('bioa.json'); — emailnitram
– emailnitram, Commented Mar 7, 2014 at 23:33
@emailnitram I have updated the plunk to do that the status returned is 200 on the console, which means the data should be available in the controller(?). — goutham
– goutham, Commented Mar 7, 2014 at 23:43

hassassin · Accepted Answer · 2014-03-08 01:32:43Z

1

first of all, your includes are reversed here

controller('BioACtrl',['bioAList','$scope',function($scope,bioAList){

Should be

controller('BioACtrl',['$scope', 'bioAList',function($scope,bioAList){

Second, you are trying to access data in your bioAList service before you even fetch it. The correct way to do this is with angular promises. I modified the plnkr to acheive this access paradigm:

bioAList.getSamples().then(function(data) {
    $scope.samples = data.samples;
})

EDIT: add the thing that @OdeToCode points out.

Good point! you can just return the $http promise as the service.

return $http.get('bioa.json').success(function(data,status){
    return data;
})

And access it like you originally had.

Hope this helps!

edited Mar 8, 2014 at 1:32

answered Mar 7, 2014 at 23:50

hassassin

5,0641 gold badge32 silver badges39 bronze badges

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

2 Comments

OdeToCode Over a year ago

You can write less code if you avoid using $q. The return values from then or success will be wrapped in a promise. You also don't need to resolve the promise in the controller as that is what the resolve function is designed to do. See:plnkr.co/edit/zaOYzlCFKqVYF9ycs9aG?p=preview

goutham Over a year ago

thanks a lot!! just fixing the dependency order fixed it. @odetocode Yes I dont think we need to use $q as $http returns a promise after resolve.

Collectives™ on Stack Overflow

Angular $http not resolving in $routeProvider

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