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