ngRoute: Temporary template for 5 seconds when accessing a route with id

Question

ngRoute: Temporary template for 5 seconds when accessing a route with id

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

How can I make a template display temporarily for 5 seconds when accessing a specific path with id -The path with id already has its own template-, after 5 seconds the template that should have been shown originally in the route? I searched everywhere and I did not find anything about it. : (

This is an example of how I have the routes:

.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('!');
  }]);

This code makes the template show at a certain time, maybe it could be done with something like that, right?

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

javascript angularjs

asked by adrianojosue 01.08.2016 в 23:48

source

2 answers

1

Try this to see:

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

answered by 02.08.2016 в 20:09

Validate a text field within two div hook pulls me out of the loop while it helps

score 3 · Accepted Answer

If I understood correctly you want something like this

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

This is not possible either by changing the template using templateUrl: function or by using resolve , the reason is as follows:

The options template or templateUrl when you use it with a function instead of a string expect you to return content ( string ), not a promise ( $timeout )

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

template : html template in the form of a string, or a function that returns an html template as a string that should be used by the ngView or ngInclude directives.

Using a resolve you can return a promise but this implies that:

When the page is pending, it is waiting and does not browse
When the page is resolved, navigate to the template or templateUrl that you configured and do not allow further modifications
When the navigation fails, it fails and does not navigate

None of the above options do what you want

The closest option is redirectTo but this, like template expects you to return a string and not a promise.

The redirectTo function expects you to return a string that will be used to update $location.path() and $location.search()

Solution

Make a new controller and pass the url to which you must redirect in the query. After 5 seconds redirect

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>