Saturday 13 May 2017

$http.get request is only successful on first page load

Here's the scenario: a user visits http://localhost:3000/all, and a list of all users are displayed on the page. Great, that's what I want. But, when I refresh the page, I lose everything (no HTML is rendered). I'm just left with a raw JSON output that is being returned by the server.

The relevant sections of my Angular file:

var app = angular.module('social', ['ngRoute', 'ngCookies', 'ui.router'])

app.config(function($routeProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
    $routeProvider
   .when('/', {
    templateUrl: 'home.html',
    controller: 'HomeController'
    })
   .when('/login', {
    templateUrl: 'login.html',
    controller: 'LoginController'
    })
   .when('/signup', {
    templateUrl: 'signup.html',
    controller: 'SignupController'
    })
   .when('/about', {
    templateUrl: 'about.html'
    })
   .when('/profile', {
    templateUrl: 'profile.html',
    controller: 'UserProfileController',
   })
   .when('/all', {
    templateUrl: 'members.html',
    controller: 'MembersController',
    resolve: {
        allMembers: function($http) {
            return $http.get('/all').then(function(res) {
                return res.data
            })
        }
    }
   })
   $locationProvider.html5Mode(true)
})

app.controller('MembersController', function($http, $scope, $cookies) {
    function getAllUsers() {
        $http.get('/all').then(function(res) {
            $scope.members = res.data
        })
    }
    getAllUsers()
})

You'll notice I attempted to use resolve in app.config, but that didn't help (I'm probably using it incorrectly). When using resolve, my controller becomes:

app.controller('MembersController', function(allMembers, $scope) {
    $scope.members = allMembers
})

I get the same result: data loads fine on initial page load, but upon refresh, I'm left with raw JSON on the page.

The relevant part in the server (using Mongoose):

app.get('/all', function(req, res, next) {
    User.find(function(err, users) {
        if (err) console.log(err)
        return res.json(users)
    })
})

Could anyone tell me what I'm doing wrong? I followed an online tutorial before trying this on my own, and it worked fine in the tutorial (obviously).



via Farid

No comments:

Post a Comment