1

Estoy aprendiendo y tengo algunos problemas para comprender el funcionamiento de las rutas.

Esta app pide, en un pequeño formulario, un nombre y un apellido y llama a una vista con estos datos al oprimir un botón; esta nueva vista muestra los datos recibidos en la página.

En el archivo app.js se encuentran definidas las rutas.

(function(){
  'use strict';

  angular.module('misRutas', ['misRutas.controllers', 'ngRoute']);

  angular.module('misRutas').config(config);

  config.$inject = ['$routeProvider', '$locationProvider'];
  function config($routeProvider, $locationProvider){
    $routeProvider
      .when('/app/rutas101/vista1', {
         controller: 'Ruta1Controller as vm',
        templateUrl: '/app/partials/rutas101/_vista1.html'
      })
      .when('/app/rutas101/vista3/:nombre/:apellido', {
         controller: 'Ruta3Controller as vm',
        templateUrl: '/app/partials/rutas101/_vista3.html'
      })
      .otherwise({redirectTo: '/app/rutas101/vista1'});
      $locationProvider.html5Mode(true);
  }
})();

El archivo partials/_vista1.html solo muestra el formulario para introducir el nombre y el apellido.

<p>Nombre: <input type="text" ng-model="nombre"></p>
<p>Apellido: <input type="text" ng-model="apellido"></p>
<p><button ng-click="vm.cargaVista3()">Cargar Vista3</button></p>

En el controlador Ruta1Controller se encuentra la función cargarVista3() cuya función está indicada en el nombre.

  function Ruta1Controller($scope, $location){
    var vm = this;

    vm.message = 'Hola Mundo!';
    vm.cargaVista3 = function() {
      $location.path('/app/rutas101/vista3/' 
        + $scope.nombre + '/' 
        + $scope.apellido);
    }    
  };

El archivo partials/_vista3.html muestra los datos recibidos en la URL que se genera en la función cargaVista3():

<p>
  Desde la vista 3
  <ul>
    <li>Nombre: {{ vm.nombre }}</li>
    <li>Apellido: {{ vm.apellido }}</li>
  </ul>
</p>

Este vista la carga el controlador Ruta3Controller que se muestra a continuación:

function Ruta3Controller($scope, $routeParams){
  var vm = this;

  vm.nombre = $routeParams.nombre;
  vm.apellido = $routeParams.apellido;
}

Problema

Cuando se usa la vista generada por Ruta1Controller.cargarVista3() se genera una URL tipo http://localhost:8000/app/rutas101/vista3/Javier/Sanchez que muestra el resultado esperado cuando se oprime el botón <button ng-click="vm.cargaVista3()"></button>; sin embargo, cuando llamo a esta URL directamente en el navegador, obtengo un error 404 porque no encuentra la página.

Dependiendo del servidor el mensaje cambia, pero el código de error es el mismo. Con python3 -m http.server el mensaje es:

code 404, message File not found
"GET /app/rutas101/vista3/Javier/Sanchez HTTP/1.1" 404 -

con node .\scripts\web-server.js el mensaje es

404 Not Found: /app/rutas101/vista3/Javier/Sanchez

¿Cómo debe ser la configuración de mis rutas para que al introducir la URL comentada directamente en el navegador, esta se resuelva y me muestre el resultado esperado?

Gracias por su tiempo.

4
  • Cuál es el propósito de usar html5mode true? Si usas hashbang, no necesitas hacer nada en el servidor. Commented el 31 may. 2016 a las 15:56
  • Es cierto. De forma particular, yo prefiero usar el hashbang, que es el comportamiento estándar de AngularJS, y al usarlo, efectivamente no hay ningún problema. Pero creo, que aprendo más y mejor enfrentando los problemas que ignorándolos. Y lo que expongo no es un problema, realmente, todo funciona. La intención es más bien didáctica, estoy aprendiendo. Espero haberme explicado.
    – toledano
    Commented el 31 may. 2016 a las 16:20
  • Es un buen propósito Commented el 31 may. 2016 a las 16:21
  • @toledano Tus rutas están bien. Esto no es un problema de angular sino de como sirves los ficheros estáticos en el servidor. Mencionas dos tipos de servidores diferentes por lo que la respuesta sería muy amplia ya que habilitar html5mode en el servidor puede hacerse diferente por lenguaje y/o framework.
    – devconcept
    Commented el 31 may. 2016 a las 18:18

1 respuesta 1

2

Voy a ofrecerte una respuesta que no es especifica para ningún HTTP server sino una respuesta genérica para entender como abordar el tema.

Esto esta relacionado con un componente de angular llamado $location service. Este modulo es responsable de manejar la reescritura de las URL cuando el usuario cambia manualmente una ruta en el navegador o navega utilizando un link.

Tiene dos modos de trabajo: Hashbang y html5

Hashbang Mode: Es el modo por defecto de Angular e utiliza el un caracter '#' para separar la ruta interna de la URL que sirve el servidor. Ten en cuenta que el navegador, cuando hace GET de una URL, NO envía ni el caracter '#' ni lo que viene después, ya que esta parte de la URL se maneja del lado del cliente, es decir el navegador la maneja.

Esto quiere decir que cuando pones, http://example.com/#/mi/ruta el navegador se conecta a example.com:80 y hace GET / dejando el resto de la ruta para ser utilizado luego por angular.

html5mode(true): Cuando invocas este método, angular deja de utilizar el carácter '#' para separar la ruta interna y utiliza rutas que parecen estar en el servidor. Digo parecen por que angular no están en el servidor, es una cuestión interna de angular para usar la API del historial (History API).

Lo que sucede con este modo es que cuando intentas hacer deep linking, es decir escribir manualmente la url completa http://example.com/mi/ruta en el navegador, este se conecta pero hace GET /mi/ruta ruta que no existe en el servidor y por lo tanto retronara 404 no encontrado.

¿Cómo debe ser la configuración de mis rutas para que al introducir la URL comentada directamente en el navegador, esta se resuelva y me muestre el resultado esperado?

En detalle, esto depende de servidor en servidor, pero la técnica es la misma tienes que atrapar cualquier ruta interna de tu app pero enviarle la app en si, recuerda que la ruta no existe en el servidor.

La documentación de ui-router tiene varios ejemplos para distintos servers de como puede hacerse. Se que no estas usando ui-router pero es igual la técnica para el router de angular.

Cuidado! Este tipo de reglas de reescritura tienden a generar problemas de carga de templates/css/js si las reglas no están bien manejadas ya que podría redireccionar también el contenido estático.

Por ultimo, puedes esto generalmente requiere que agregues una ruta en angular para manejar cualquier ruta invalida que el usuario pudiese ingresar.

.otherwise({redirectTo: '/app/404'});

Pero esto dependerá de como quieras que se comporte la pagina.

1
  • Muchas gracias, @rnd. En producción podría reescribir la URL para vaya a donde quiero o usar otherwise. Muchas gracias, respuesta aceptada.
    – toledano
    Commented el 1 jun. 2016 a las 17: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.