Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

488
Vistas
Page goes blank after loading URL with $routeProvider in AngularJS

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.

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda