Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

484
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda