AngularJS: 404 auf Seite aktualisieren, URLs reinigen, mit $ locationProvider.html5Mode

Question

Ich versuche, das Problem zu beheben mit $ locationProvider.html5Mode (true); beim Aktualisieren der Seite.

Es behebt dieses localhost/#/home Hash in Urls, aber wenn ich die Seite aktualisieren zeigt es einen 404.

Ich verwende nginx local.

Lauf angularjs v1.0.7. Neueste Versionen funktionieren anscheinend nicht.

Kopf

<base href="/"> 

Angular

var app = angular.module('myApp', []); 

app.config(function($routeProvider, $locationProvider) { 
     $routeProvider 
     .when('/', { 
     templateUrl: 'home.html', 
     title: 'home' 
     }) 
     .when('/about', { 
     templateUrl: 'about.html', 
     title: 'about' 
     }) 
     .when('/contact', { 
     templateUrl: 'contact.html', 
     title: 'contact' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
     $locationProvider.html5Mode(true); 
    }); 

Answer 1

Wenn Sie Html5 Modus Ihre Links von http://example.com/#about zu http://example.com/about wurde, aber es ist eine Sache, warum Sie 404 empfangen - was für Server-Seite Lösung tun Sie nutzen? Da Ihr 404 von Ihrem Backend zurückgegeben wird und nicht von angularJS router selbst, müssen Sie, um es im HTML5-Modus zugänglich zu machen, dieselbe html-Seite mit js bereitstellen, die zu Ihren neuen Routen auf der Serverseite gehören, genau wie Sie es bei Ihnen zu Hause geliefert haben Seite lädt Ihre eckige Anwendung. Zum Beispiel in Laravel stellen Sie sich eine solche Route für Ihre Website-Wurzel, und Ihre Winkel App-Code haben, ist in home.blade.php

Route::get('/',function(){ return view('home');}); 

so müssen Sie auf die gleiche Ansicht gleiche Routen erstellen zeigt zu laden, um dadurch Wenn Sie Ihre eckige js-App mit Markup versehen, zeigt Ihnen Ihr eckiger Router anhand der Routing-Ansicht die benötigte Vorlage an.

Route::get('/about',function(){ return view('home');}); 
    Route::get('/contact',function(){ return view('home');}); 

Wenn Ihre Verwendung verschiedener Serverseite Rahmen oder Lösung Hoffnung Sie Leitgedanke haben, was Sie tun müssen, um 404 Problem zu lösen, wenn sie direkt zugreifen - nur gleichen Strecken auf Server-Seite zur Startseite zeigt Laden richten Sie eckige js app. Wenn Sie kein serverseitiges Framework verwenden, das statische HTML-Dateien per nginx bereitstellt, müssen Sie /contacts/about Standorte einrichten, um auf Ihren Dokumentenstamm index.html zu verweisen, der Ihre eckige App enthält.

Um zB

location/{ 
    root /srv/www/example.com/public_html; 
    index index.html index.htm; 
} 
location /about/ { 
    root /srv/www/example.com/public_html; 
    index index.html index.htm; 
} 
location /contacts/ { 
    root /srv/www/example.com/public_html; 
    index index.html index.htm; 
}