Erro 404 de roteamento do AngularJS com o modo HTML5

Eu comecei com js angular, tentei roteamento e funcionou muito bem.O problema é quando eu atualizar a página que está mostrando erro 404 desde que está verificando no meu diretório real em vez de verificar em rotas.

aqui está o 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"; });

aqui estão as saídas do navegador

saída

isso é quando eu atualizar

erro

por favor me forneça alguma solução.

O modo HTML5 requer regravação de URL.

Do Documentos:

Modo HTML5

Lado do servidor

Usando este modo requer reescrita URL no lado do servidor , basicamente você tem que rewrite todos os seus links para o ponto de input do seu aplicativo (por exemplo, index.html). A exigência de uma tag também é importante para este caso, pois permite que o AngularJS diferencie entre a parte da url que é a base do aplicativo e o caminho que deve ser manipulado pelo aplicativo.

– AngularJS Developer Guide – Usando o $ location (lado do servidor no modo HTML5)

Para NodeJS e 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 o IIS no Windows

             

Como configurar o IIS para a regravação de URL de um aplicativo AngularJS no modo HTML5?

Para o apache

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

Veja, como rewrite o url no apache htaccess para o aplicativo angularjs

Para maiores informações

Artigo: AngularJS – Habilite a atualização da página do modo HTML5 sem erros 404 no NodeJS e no IIS .

Eu tive o mesmo problema usando http-server como meu servidor web local, é um problema conhecido com html5 e detalhado no angular-ui / ui-router FAQ .

Eu mudei para o Nginx (instale via apt-get) com o seguinte /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 / parar / recarregar após as alterações;

 sudo service nginx  

O FAQ também cobre o Apache / Express / asp.NET

O problema é que você não está atribuindo a variável $ routeProvider ao seu controller, isto faz com que o controller não consiga acessar a variável $ routeParams

tente

  /*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"; }); 

ATUALIZAR

Eu acho que você não pode usar uma versão de rota com uma versão inferior do angulajs por favor mude uma versão superior do angularjs por exemplo

 /* */  
       blue green //blue.html and green.html are in same directory as index.html 

Click on the links to load blue or green.