2

¿Cómo puedo hacer que un template se muestre temporalmente durante 5 segundos al acceder a una ruta especifica con id -La ruta con id ya tiene su propio template-, luego de los 5 segundos que se muestre el template que debió mostrarse originalmente en la ruta? Eh buscado en todas partes y no eh encontrado nada al respecto. :(

Esto es un ejemplo de como tengo las rutas:

.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider){
    $routeProvider
      .when('/',{
        redirectTo: '/news'
      })
      .when('/news',{
        templateUrl: 'html/news.html',
        controller: 'newsCtrl',
        controllerAs: 'news',
        title: 'Noticias'
      })
      .when('/news/:id',{
        templateUrl: 'html/article.html',
        controller: 'articleCtrl',
        controllerAs: 'article',
        title: 'Artículo'          
      })
      .otherwise({
        redirectTo: '/error404'
      });
      $locationProvider.html5Mode(true).hashPrefix('!');
  }]);

Este código hace que el template se muestre en cierto tiempo, talvez se podría hacer con algo así, no?

resolve: {
      delay: function($q,$timeout){
        var delay = $q.defer();
        $timeout(delay.resolve, 250);
        return delay.promise;
      }
    }

2
  • Los templates se cargan por vista y una vez cargados no pueden cambiarse. Lo que quieres se puede lograr dentro de una sola vista, reemplazando su contenido al transcurrir cierto tiempo pero sin nada de código y sin saber que sistema de rutas estás usando es imposible ayudarte.
    – devconcept
    Commented el 2 ago. 2016 a las 14:05
  • @devconcept Gracias por comentar. Actualice la pregunta con unos ejemplos, talvez ahora puedas ayudarme. Commented el 3 ago. 2016 a las 14:48

2 respuestas 2

3
+50

Si entendí correctamente tu quieres algo como esto

url -> 0s -> plantilla temporal -> 5s -> plantilla final

Esto no es posible ni cambiando la plantilla usando templateUrl: function ni usando resolve, la razón es la siguiente:

  1. Las opciones template o templateUrl cuando la usas con una función en lugar de un string esperan que le devuelvas contenido (string), no una promesa ($timeout)

    .when('/news',{
        templateUrl: function() {
            // Siempre debes retornar un string
            return 'html/news.html';
        }
    })
    

    template: plantilla html en forma de string, o una función que retorne una plantilla html como un string que deberá ser usada por las directivas ngView o ngInclude.

  2. Usando un resolve puedes devolver una promesa pero esto implica que:

    • Cuando está pendiente la página está esperando y no navega
    • Cuando se resuelve la página navega hacia el template o templateUrl que configuraste y no permite más modificaciones
    • Cuando falla la navegación falla y no navega

    Ninguna de las opciones anteriores hace lo que quieres

  3. La opción mas cercana es redirectTo pero este, al igual que template espera que le retornes un string y no una promesa.

    La función redirectTo espera que le retornen un string que será usado para actualizar $location.path() y $location.search()

Solución

Haz un nuevo controller y pasale la url a la que debe redireccionar en la query. Luego de 5 segundos redireccionas

angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/temporal/:id', {
        template: '<h1>Redireccionando en {{tiempo}} s</h1><div><a href="#/siguiente/3">Navegar ahora</a></div>',
        controller: 'TemporalCtrl'
      })
      .when('/siguiente/:id', {
        template: '<h1>En la siguiente vista el id es {{id}}</h1>',
        controller: 'SiguienteCtrl'
      })
  })
  .controller('TemporalCtrl', function($scope, $interval, $location, $routeParams) {
    var promise;
    $scope.tiempo = 5;

    promise = $interval(function() {
      $scope.tiempo = $scope.tiempo - 1;
      if ($scope.tiempo === 0) {
        $location.url('/siguiente/' + $routeParams.id)
      }
    }, 1000, $scope.tiempo);

    $scope.$on('$destroy', function() {
      $interval.cancel(promise);
    });
  })
  .controller('SiguienteCtrl', function($scope, $routeParams) {
    $scope.id = $routeParams.id;
  })
  .run(function($location, $timeout) {
    $location.url('/temporal/3');
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

11
  • Algo así es lo que quiero @devconcept, pero en mi caso es una url con id (/siguiente:id) y no una fija (/siguiente). Cómo sería el código entonces? Ejemplo: url:id -> 0s -> plantilla temporal -> 5s -> plantilla final Commented el 3 ago. 2016 a las 18:50
  • @AdrianoJosué Actualizé la respuesta. Básicamente no cambia mucho, solo tienes que pasar el id ya sea en la query o como un parámetro (yo opté por esto último)
    – devconcept
    Commented el 3 ago. 2016 a las 19:45
  • Disculpa que te moleste tanto @devconcept lol. Parece que no me eh explicado bien, lo único que quiero es que al acceder a una noticia de mi web se ejecute el template temporal y luego de los 5 segundos me redirija a la url que debí aver accedido. Si quieres puedes ver el archivo app.js de mi web, no está minificado. geekmox.com Commented el 3 ago. 2016 a las 20:34
  • @AdrianoJosué Ese es el punto de mi respuesta. Lo que tienes que hacer es cambiar como compones los links de tus noticias, de hecho ahora con más información ni siquiera necesitas el redirectUrl, simplemente tienes que cambiar todos los links a la url /temporal/:id (por ejemplo) y como ya tienes el id y sabes cual es la url de noticias redirecciona directamente a /news/:id. Un controlador con un intervalo como el que te puse hace el truco.
    – devconcept
    Commented el 3 ago. 2016 a las 20:42
  • No eh podido implementarlo no se qué pasa, al acceder desde cualquier url de mi web se activa el "TemporalCtrl" y luego de los 5 segundos se va al template de "/error404" que tengo, también sucede luego de aver dado clic en cualquier noticia y de aver pasado los 5 segundos. Ojalá y pudieras darme un ejemplo, cuando tengas tiempo claro. Commented el 4 ago. 2016 a las 20:05
1

Trata con esto a ver:

  setTimeout(function () {
  window.location = '/ruta'
  }, 5000);

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.