5

Tengo un template que se muestra temporalmente, el problema con esto es que se muestra sólo si doy clic en un enlace ya predefinido.

Lo que quiero hacer es que el template temporal se muestre al acceder a la URL con id (/news/:id) automáticamente.

Creo que esto se podría implementar guardando un valor con localStorage, así si visito la URL /news/:id el controlador ve si ese valor esta guardado, si es así entonces no muestra el template temporal, y si el valor "no está guardado" entonces si lo muestra.

El controlador lo que haría entonces es guardar el valor en el localStorage si no lo está y mostrar el template temporal durante 5 segundos, entonces cuando el template temporal me redirija a la URL con id que debí haber accedido desde un principio que borre ese valor en el localStorage para cuando acceda nuevamente muestre el template temporal.

El problema es que no se como implementar algo así, espero que puedan ayudarme con un ejemplo, soy nuevo en esto de la programación.

<a ng-href="/news/{{item.id}}/sponsor"></a>

app.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider){
    $routeProvider
      .when('/news/:id',{
        templateUrl: 'html/article.html',
        controller: 'articleCtrl',
        controllerAs: 'article',
        title: 'Artículo'
      })
      .when('/news/:id/sponsor',{
        templateUrl: 'html/sponsor.html',
        controller: 'sponsorCtrl',
        controllerAs: 'sponsor',
        title: 'Patrocinador'
      });
      $locationProvider.html5Mode(true).hashPrefix('!');
  }]);

app.controller('sponsorCtrl', ['$scope','$interval','$location','$routeParams',
  function($scope, $interval, $location, $routeParams) {
    var promise;
    $scope.time = 5;

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

    $scope.$on('$destroy', function() {
      $interval.cancel(promise);
    });
  }]);

  app.run(function($rootScope, $location, $routeParams) {
    $rootScope.$on('$locationChangeStart', function(evt, to, from) {
      var toRegExp = '/news/' + $routeParams.id;
      var fromRegExp = '/news/' + $routeParams.id + '/sponsor';
      var toMatch = toRegExp.exec(to);
      var fromMatch = fromRegExp.exec(from);
      if (toMatch && (!fromMatch || toMatch[1] !== fromMatch[1])) {
        evt.preventDefault();
        $location.path('/news/' + $routeParams.id + '/sponsor').replace();
      }
    });
  });

7
  • Disculpa tu estas usando router-ui? el 4 sep. 2016 a las 0:21
  • @PedroMiguelPimientaMorales No, utilizo el ngRouter normal de AngularJS. el 4 sep. 2016 a las 0:53
  • Disculpa, estoy un poco confundido, tratas d guardar un valor en el localstorage, para luego a través de ese valor cargar un template?? el 4 sep. 2016 a las 1:18
  • @PedroMiguelPimientaMorales Mmm.. No, quiero que al acceder a la URL con id (/news/:id) se muestre el template temporal sólo si el valor no existe en el localStorage -el valor del localStorage es sólo para que el controlador sepa si debe mostrar el template temporal. Pero no quiero que ese valor exista para que el template temporal siempre se muestre -no se si me explique bien lol. el 4 sep. 2016 a las 1:35
  • Osea que en el localstrage este un 1 o 0, y de alli depende? el 4 sep. 2016 a las 2:14

1 respuesta 1

3

No necesitas localStorage para saber de que ruta vienes y hacia donde vas (y hacer una redirección basándose en una condición usando esa información). Para esta tarea ngRoute cuenta con un evento $locationChangeStart.

angular.module('app', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '<h1>Seleccione una página para navegar</h1><p>Ir a <a href="#/news/1">news 1</a></p><p>Ir a <a href="#/sponsor/1">sponsor 1</a></p>'
      })
      .when('/news/:id', {
        template: '<h1>News</h1>'
      })
      .when('/sponsor/:id', {
        template: '<h1>Sponsor</h1><p>Ir a <a href="#/news/1">news 1</a></p><p>Ir a <a href="#/news/2">news 2</a></p>'
      })
      .otherwise({
        redirectTo: '/'
      });
  })
  .run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeStart', function(evt, to, from) {
      console.log('Navegando');
      console.log('desde:', from);
      console.log('hasta:', to);

      var toRegExp = /http:\/\/stacksnippets\.net\/js#\/news\/(\d+)/;
      var fromRegExp = /http:\/\/stacksnippets\.net\/js#\/sponsor\/(\d+)/;
      var toMatch = toRegExp.exec(to);
      var fromMatch = fromRegExp.exec(from);

      if (toMatch && (!fromMatch || toMatch[1] !== fromMatch[1])) {
        console.log('Mala navegación detectada')
        evt.preventDefault();
        $location.path('/sponsor/' + toMatch[1]);
      }
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<div ng-app="app">
  <div ng-view></div>
</div>

Los parámetros from y to te indicarán como esta ocurriendo la navegación. Puedes descomponer esas urls en partes y así sacar toda la información que necesites de ellas.

En el ejemplo estoy usando expresiones regulares para eso o puedes usar el método split('/') y mirar los dos últimos registros.

Básicamente el algoritmo es si llegas a /news/id y no vienes desde /sponsor/id o los ids no son iguales cancelas la navegación.

6
  • 1
    Gracias por responder @devconcept. Pero no entiendo cómo podría implementar eso con el controlador del template temporal, ¿podrías darme un ejemplo por favor? -Recuerda que mis rutas tienen id. el 9 sep. 2016 a las 18:37
  • @adrianojosue Puedes usar $location para descomponer la url en partes. El evento se ejecuta para todas las navegaciones pero si estas navegando hacia /news y no vienes desde /sponsor o vienes con un id diferente cancelas la navegacion y redirijes. Lee es.stackoverflow.com/questions/17188/… pero creo que en tu caso lo que necesitas es $location.path() o $location.url()
    – devconcept
    el 17 sep. 2016 a las 13:55
  • Eh intentado implementarlo de esta forma pero no me funciona: .run(['$rootScope','$routeParams','$location', function($rootScope,$routeParams,$location){ $rootScope.$on('$locationChangeStart', function(evt,to,from){ if(to === '/news' && from !== '/news/' + $routeParams.id){ evt.preventDefault(); $location.url('/news/' + $routeParams.id + '/sponsor'); } }); }]); el 18 sep. 2016 a las 20:25
  • @adrianojosue Revisa el update
    – devconcept
    el 30 sep. 2016 a las 19:59
  • Eh agregado a mi pregunta como eh implementado tu respuesta, pero parece que lo eh implementado mal, revísala a ver que sucede. Tengo un lío totalmente lol. Lo que quiero hacer es que al acceder a la ruta "/news/:id" me redirija a la ruta del template temporal "/news/:id/sponsor" entonces ya el template temporal me redirige a la ruta de la noticia de nuevo "/news/:id". el 30 sep. 2016 a las 21:22

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.