AngularJS enrutamiento error 404 con modo HTML5

Acabo de empezar con js angulares, probé el enrutamiento y funcionó bastante bien. El problema es que cuando actualizo la página, aparece el error 404 ya que está revisando mi directorio real en lugar de registrar las rutas.

aquí está el código completo

      https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green //https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue.html and https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green.html are in same directory as index.html 

Click on the links to load https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue or https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green.

var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider, $locationProvider) { $routeProvider .when("/https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue/:name?", { templateUrl: "https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue.html", controller: "https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue_control" }) .when("/https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green", { templateUrl: "https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green.html", controller: "https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green_control" }) $locationProvider.html5Mode({ enabled: true }); }); app.controller("https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue_control", function($scope) { $scope.msg = "this is https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/blue"; }); app.controller("https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green_control", function($scope) { $scope.msg = "this is https://stackoverflow.com/questions/44271461/angularjs-routing-404-error-with-html5-mode/green"; });

aquí están las salidas del navegador

salida

esto es cuando me actualizo

error

por favor dame alguna solución.

    El modo HTML5 requiere la reescritura de URL.

    De los documentos:

    Modo HTML5

    Lado del servidor

    El uso de este modo requiere la reescritura de URL en el lado del servidor , básicamente tiene que volver a escribir todos sus enlaces al punto de entrada de su aplicación (por ejemplo, index.html). Requerir una etiqueta también es importante para este caso, ya que permite a AngularJS diferenciar entre la parte de la url que es la base de la aplicación y la ruta que debe manejar la aplicación.

    – Guía del desarrollador de AngularJS – Uso de $ location (lado del servidor del modo HTML5)

    Para NodeJS y ExpressJS

     var express = require('express'); var path = require('path'); var router = express.Router(); // serve angular front end files from root path router.use('/', express.static('app', { redirect: false })); // rewrite virtual urls to angular app to enable refreshing of internal pages router.get('*', function (req, res, next) { res.sendFile(path.resolve('app/index.html')); }); module.exports = router; 

    Para IIS en Windows

                 

    Ver, ¿cómo configuro IIS para reescribir URL una aplicación AngularJS en modo HTML5?

    Para apache

     RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] RewriteRule ^ 

    Ver, Cómo reescribir url en apache htaccess para la aplicación angularjs

    Para más información

    Artículo: AngularJS – Habilite la actualización de página en modo HTML5 sin errores 404 en NodeJS e IIS .

    Tuve el mismo problema al usar http-server como mi servidor web local, es un problema conocido con html5 y se detalla en las preguntas frecuentes de angular-ui / ui-router .

    Cambié a Nginx (instalé vía apt-get) con el siguiente /etc/nginx/sites-enabled/default

     server { listen 80 default_server; listen [::]:80 default_server; #root /var/www/html; root /home/conor/workspace/code_institute/route_test; # Add index.php to the list if you are using PHP index index.html index.htm index.nginx-debian.html; #server_name _; server_name localhost; location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. #try_files $uri $uri/ =404; try_files $uri $uri/ /index.html; } } 

    Para iniciar / detener / volver a cargar después de los cambios;

     sudo service nginx  

    Las preguntas frecuentes también cubren Apache / Express / asp.NET

    El problema es que no está asignando la variable, $ routeProvider a su controlador, esto hace que el controlador no pueda acceder a la variable $ routeParams

    intentalo

      /*app.controller("blue_control", function($scope) { $scope.msg = "this is blue"; }); app.controller("green_control", function($scope) { $scope.msg = "this is green"; });*/ app.controller("blue_control", function($scope,$routeParams) { console.log( $routeParams.term_user); $scope.msg = "this is blue"; }); app.controller("green_control", function($scope,$routeParams) { $scope.msg = "this is green"; }); 

    ACTUALIZAR

    Creo que no puedes usar una versión de ruta con una versión inferior de angulajs, por favor cambia una versión superior de angularjs por ejemplo

     /* */  
     < !DOCTYPE html>      blue green //blue.html and green.html are in same directory as index.html 

    Click on the links to load blue or green.