Page goes blank after loading URL with $routeProvider in AngularJS

Question

I'm having trouble from keeping one of my pages from going blank after refreshing my browser.

When a user visits /user/:username, profile.html loads. It works as intended on the first load, but if I refresh the page, I'm left with a raw JSON output on the screen (previously, it would just say "null").

For further context, I have an ng-href in my home.html file:

<h3>View your profile page <a ng-href="/user/{{user.username}}">here</a>.</h3>

The corresponding Angular file:

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

app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
 templateUrl: 'home.html',
 controller: 'HomeController'
})
.when('/login', {
 templateUrl: 'login.html',
 controller: 'LoginController'
})
.when('/signup', {
 templateUrl: 'signup.html',
 controller: 'SignupController'
})
.when('/user/:username', {
    templateUrl: 'profile.html',
    controller: 'UserProfileController'
})
$locationProvider.html5Mode(true)

})

My controller:

app.controller('UserProfileController', function($http, $scope, $cookies, $rootScope, $routeParams) {
console.log("$cookies.get('currentUser')")
console.log($cookies.get('currentUser'))
function getCurrentUser() {
    $http.get('/user/' + $routeParams.username).then(function(res) {
        console.log('res.data in the user profile controller')
        console.log(res.data)
        $scope.user = res.data
    })
}

if ($cookies.get('currentUser') != undefined) {
    getCurrentUser()
} else {
    console.log("No one is here.")
}

})

I got this to work by removing $locationProvider.html5Mode(true), and using ng-href="#/user/{{user.username}}", meaning that no data is lost upon page refresh, and I don't get a blank screen. But, the problem is that the # shows up in the URL, which I eventually won't want. Obviously, if I push an app like this to production, I don't want the # appearing in the URL. If it needs to be their during development, I can live with that.

I should also note that I only have this problem with /user/:username. All of my other routes (/, /login, and /signup) work as expected, meaning the pages don't go blank after a refresh, and all the data persists due to the use of cookies.

Try to use this middlware https://github.com/bripkens/connect-history-api-fallback in your nodejs server — Leguest, Apr 27 '17 at 08:12
Ok, so I skimmed over the doc. This solution would probably address only part of the problem. "1. The request is a GET request 2. which accepts text/html, 3. is not a direct file request, i.e. the requested path does not contain a . (DOT) character and 4. does not match a pattern provided in options.rewrites (see options below)" I plan on utilizing full CRUD operations, so being restricted to only a `GET` request won’t be ideal. I might also run into problems if I use a path such as `user.username` (#3 above). — Farid, Apr 27 '17 at 08:17
Thanks for the fast reply and the link! Please ignore the above comment. I couldn't edit it any further. Here's what I meant to write: I skimmed over the doc, and this solution would probably address only part of the problem since I plan on using full CRUD operations. — Farid, Apr 27 '17 at 08:26
Possible duplicate of [angularjs 1.6.0 (latest now) routes not working](http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working) — georgeawg, Apr 27 '17 at 19:24

score 1 · Accepted Answer · edited May 23 '17 at 12:34

1

AngularJS stores your data in memory so when you refresh the page you will lose the data that is why your page left with raw expressions because angualr lost the data that is required for bindings.

You could use route resolves to get the data that is required for each route so that when you refresh the page angular will call the resolve function for that route which will return the data to controller.

Route resolves in Angular

edited May 23 '17 at 12:34

Community

1
1

answered Apr 27 '17 at 09:17

Gangadhar Jannu

4,136
6
29
49

Ok, I tried with `resolve`, but it still doesn't seem to work. I even tried using `$stateProvider` instead of `$routeProvider`, and it still resulted in the same problem. The problem is that the page loads perfectly fine the first time, but then I lose all data (and I'm left with raw JSON output on the screen) as soon as I refresh the page. resolve: { user: function($http) { return $http.get('/user/johnsmith').then(function(res) { return res.data }) } } – Farid May 01 '17 at 00:35
Something else I noticed: if the url is `url: '/:username'`, then everything works fine. The data and the page still load properly after a refresh. I run into problems once I use a longer url, like `url: '/user/:username'`. In that situation, the page is lost after a refresh. – Farid May 01 '17 at 00:40
Try to create a plnkr for the issue so that we can look into that along with the library version information – Gangadhar Jannu May 01 '17 at 07:04

Page goes blank after loading URL with $routeProvider in AngularJS

1 Answers1