1

Con el controller estoy alimentando el templateUrl con los datos de los archivos json que busca mediante el id, pero al un archivo json no existir el templateUrl queda vacío obviamente. Lo que quiero es que me ayuden a implementarle al controller una función de error para cuando no encuentre un archivo json me redirija a la ruta otherwise del ngRoute que es la que tengo con un templateUrl de error404. También sucede cuando en le navegador coloco una url con id que no existe, por que obviamente no encontró el archivo json. Espero que puedan ayudarme, de antemano ¡Muchas gracias!

.when('/items/:id',{
  templateUrl: 'items-details.html',
  controller: 'ItemDetailsCtrl',
  controllerAs: 'itemDetails'
})
.otherwise({
  redirectTo: '/error404'
});



app.controller('ItemDetailsCtrl', ['$scope','$routeParams','$http', function($scope,$routeParams,$http){
    $http.get('/json/items/' + $routeParams.id + '.json').success(function(data){
      $scope.item = data;
    });
  }]);

1 respuesta 1

1

Esto lo podrías conseguir capturando el error de la petición con $http.get y usando el servicio $location para navegar a la página de error.

La implementación de tu controlador quedaría así:

app.controller('ItemDetailsCtrl', ['$scope','$routeParams','$http', '$location',
function($scope,$routeParams,$http, $location){
    $http.get('/json/items/' + $routeParams.id + '.json').then(
        function(resp)  
        {
            $scope.item = resp.data;
        }, function(err){
            $location.path("/error404");
        });
}]);

Actualización 03/05/2016: para responder a las preguntas de los comentarios

"Sigue accediendo al templateUrl aunque no exista el archivo .json"

Ese es el comportamiento de ngRoute, primero carga la plantilla y después ejecuta el controlador. Además debe ser así porque se comparte la misma plantilla para las distintas peticiones que se realizan al controlador cambiando los parámetros por lo que la plantilla podría estar cacheada

"Ahora el templateUrl no se alimenta con los datos de los archivos .json existentes"

  • En principio debería funcionar correctamente aunque si que he detectado un error en el código porque al obtener la respuesta del $http.get hay que acceder a la propiedad ´data´ porque lo que devueve en el promise es la respuesta completa

  • También es posible que te falte definir la ruta para la página de error

    .when('/error404', {
        templateUrl : 'pages/error404.html'
    })
    

Por cierto, he creado este Plunker donde lo puedes ver funcionando

4
  • Gracias por responder @rsciriano eres el único que me ayuda aquí lol. La implementación del controller que me enseñaste no me funciona correctamente, sigue accediendo al templateUrl aunque no exista el archivo .json y ahora el templateUrl no se alimenta con los datos de los archivos .json existentes, qué crees que sea ? y Google Chrome no me lanza ningún error para ver por qué es. Commented el 1 may. 2016 a las 3:23
  • Hola @AdrianoJosué, he actualizado mi respuesta para intentar responder a tus preguntas. Saludos
    – rsciriano
    Commented el 3 may. 2016 a las 16:47
  • Tengo todo el código correctamente escrito y todo funciona bien excepto que cuando no encuentra el archivo .json no me redirecciona a la página de error y tengo definida la ruta para la página de error y todo esta bien, no entiendo que sucede. Commented el 4 may. 2016 a las 0:26
  • Hola @AdrianoJosué, quizás mirado mi código veas algo que te ayude. También podrías modificar el Plunker con tu código para reproducir el problema y poder ayudarte (o compartir tu código en GitHub). Saludos
    – rsciriano
    Commented el 4 may. 2016 a las 5:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.