AngularJS - Warum, wenn URL-Adresse zu ändern $ routeProvider scheint nicht zu arbeiten und ich bekomme einen 404-Fehler

Question

Meine $routeProvider wie diese konfiguriert ist:

teachApp.config(['$routeProvider', '$locationProvider', function($routeProvider,  $locationProvider) { 
    $routeProvider. 
     when('/teach/', {templateUrl: 'views/login_view.html'}). 
     when('/teach/overview', {templateUrl: 'views/overview_view.html'}). 
     when('/teach/users', {templateUrl: 'views/users_view.html'}). 
     otherwise({redirectTo: '/teach/'}); 
    $locationProvider.html5Mode(true); 
}]); 

Innerhalb der App, wenn ich auf einen Link klicken, wie <a href="/teach/overview">Overview</a>, die Übersicht teilweise zeigt wie erwartet. Wenn ich jedoch die URL in der Adressleiste manuell auf genau die gleiche URL ändere, erhalte ich einen 404-Fehler. Ist $routeProvider falsch konfiguriert?

ich MAMP localhost mit der Root-URL der App ist http://localhost/teach/

Answer 1

Sie benötigen Apache redirect all paths to root einrichten.

Wenn Sie direkt http://localhost/teach/overview öffnen, versucht Ihr Webserver, eine Seite aus einer Route zu liefern, die nicht definiert ist. Wenn Sie innerhalb einer eckigen App auf einen Link mit dem href-Pfad von http://localhost/teach/overview klicken, schreitet Angular schrittweise ein. Anstatt Ihren Browser eine Seite vom Server anzufordern, fängt er Ihr Klickereignis ab und geht zu Ihrem routeProvider, um zu sehen welche clientseitige Ansicht angezeigt werden soll (deshalb nennen sie es "single-page apps"). Deshalb funktionieren Ihre Links so lange, wie Sie versuchen, sie nicht direkt zu öffnen.

Neben der Apache-Konfiguration Sie auch base Tag mit href Wert von /teach/ verwenden möchte:

<base href="/teach/" /> 

, so dass Sie Ihre routeProvider nicht durch feste Präfix gezwungen haben:

teachApp.config(['$routeProvider', '$locationProvider', function($routeProvider,  $locationProvider) { 
    $routeProvider. 
     when('/', {templateUrl: 'views/login_view.html'}). 
     when('/overview', {templateUrl: 'views/overview_view.html'}). 
     when('/users', {templateUrl: 'views/users_view.html'}). 
     otherwise({redirectTo: '/'}); 
    $locationProvider.html5Mode(true); 
}]); 

Answer 2

Sie kann # auch in deinen URLs verwenden.

http://localhost/teach/#/overview 

Dies wird nicht eine Anfrage an den Server und wird stattdessen durch die Winkel $ routeProvider senden abgefangen werden.