2

Así es cómo estoy cargando mis templates, al acceder a uno existente se muestra correctamente el template pero al acceder a uno no existente el navegador no responde y tengo que cerrar la pestaña, supongo que en ese caso debería de actuar .otherwise({ redirectTo: '/error404' }); pero no lo hace y sucede el error ya dicho.

También quiero saber si creen que esta es una manera correcta de mostrar los templates, no me dará problemas a futuro ? Si tienen una mejor forma les agradecería que me mostraran cómo implementarlo.

.when('/news/:id',{
    templateUrl: function(stateParams){
      return '/html/news/' + stateParams.id + '.html';
    },
    controller: 'PruebaCtrl',
    controllerAs: 'prueba',
    title: 'Artículo'
 })
4
  • Para que pones un resolve en la ruta con un $timeout. Ese código tiene algun propósito? Porque cargas tus templates basandote en un id? La única razón que le veo a esto es que la estructura de tus vistas entre noticias sea radicalmente diferente lo cual me parece poco probable. Podrías mostrar como son los templates y un ejemplo de como son las noticias?
    – devconcept
    Commented el 27 abr. 2016 a las 12:26
  • @devconcept Con templates me refiero a las vistas, es que no quiero estar colocando las vistas una por una en un ".when('/otravista',{})" y con este código quiero que las busque mediante el id que tengo en un ng-repeat que coge los datos de un json, funciona pero cuando abro una noticia que no existe o simplemente coloco una url que no existe, así por ejemplo "/news/noexiste" el navegador deja de funcionar y tengo que cerrar la pestaña. El resolve no tiene qué ver olvídalo. asta lo voy a borrar de la pregunta lol. Commented el 27 abr. 2016 a las 19:43
  • Hola @AdrianoJosué, quizás se esté produciendo un error de JavaScript, ¿podrías comprobarlo y añadirlo a la pregunta? Por cierto, estás usando el ´ui-router´ ¿no?
    – rsciriano
    Commented el 27 abr. 2016 a las 21:49
  • @rsciriano no, no estoy utilizando "ui-router" estoy utilizando el ngRouter normal de AngularJS. debería utilizarlo ? Commented el 27 abr. 2016 a las 22:29

1 respuesta 1

0

Lo que podría hacer usar la propiedad templateProvider para implementar la carga dinámica de la plantilla porque tienes mas control de lo que está pasando.

El código quedaría algo así:

.when('/news/:id',{
    templateProvider: function(stateParams, $templateFactory){
    return $templateFactory.fromUrl('/html/news/' + stateParams.id + '.html')
        .catch(function(err){
            console.log('Error al cargar la noticia ' + stateParams.id + ': ' + err);
            return '<h1>No se ha podido cargar la noticia</h1>';
        });
    },
    controller: 'PruebaCtrl',
    controllerAs: 'prueba',
    title: 'Artículo'
})

Como puedes ver se está usando el servicio $templateFactory de ui-router para cargar la plantilla. La llamada a este servicio devuelve un promise, que nos permite capturar el error para logearlo y devolver un HTML que se usaría como plantilla para mostrar el error al usuario

Actualización:

El código anterior solo funciona con ui-router, con ngRoute estamos más limitados y por lo tanto no se pueden hacer este tipo de cosas (al menos yo no sé como)

Pensando un poco más en lo que quieres conseguir y siguiendo un poco lo que comentaba devconcept creo que se puede implementar de otra manera más adecuada y que consistiría en cargar el código HTML de las noticias desde el controlador.

El código que tendrías en el controlador sería:

app.controller('NewsCtrl', function($scope, $routeParams, $http, $sce) {

    $http.get('/html/news/' + $routeParams.id + '.html')
        .then(function(resp){
            $scope.newsContent = $sce.trustAsHtml(data);
        }, function(err){
            console.log('Error al cargar la noticia ' $routeParams.id + ': ' + err);
            $scope.newsContent = '<h1>Se ha producido un error al cargar la noticia</h1>';            
        })     
})

La ruta la tendrías configurada así:

.when('/news/:id',{
    template: '<div class="containner">{{newsContent}}</div>',
    controller: 'NewsCtrl',
    controllerAs: 'ctrl',
    title: 'Artículo'
})
4
  • ok te agradezco la ayuda, voy a implementarlo. una pregunta, cómo no utilizo ui-router tengo que cambiar algo del código de mi .config ? Commented el 27 abr. 2016 a las 22:36
  • Hola @AdrianoJosué la solución que puse solo funciona con ui-router, he actualizado la respuesta con lo que podría ser la solución basada en ngRoute. Espero que te sirba
    – rsciriano
    Commented el 28 abr. 2016 a las 16:05
  • De verdad te agradezco la ayuda, él código con el ngRouter no me funciono, pero investigue sobre ui.router y lo implemente en mi app y utilize el código que me enseñaste y funciono correctamente. ¡Muchas gracias! Commented el 30 abr. 2016 a las 0:17
  • @AdrianoJosué de nada, me alegro que te haya servido. Yo uso ui-router porque permite hacer este tipo de cosas avanzadas y otras como la que se describe en este artículo en inglés Creating Stateful Modals in AngularJS with Angular UI Router. Saludos
    – rsciriano
    Commented el 30 abr. 2016 a las 11:53

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.