Estoy aprendiendo angularjs 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 es404 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.