angularjs - Dlaczego po zmianie adresu URL $ routeProvider nie wydaje się do pracy, a ja dostaję błąd 404

Question

Moja $routeProvider jest skonfigurowany tak:

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); 
}]); 

W aplikacji, jeśli kliknę na link, takich jak <a href="/teach/overview">Overview</a>, częściowe przedstawienie jest zgodne z oczekiwaniami. Jednak gdy ręcznie zmieniam adres URL w pasku adresu na dokładnie taki sam URL, pojawia się błąd 404. Czy niepoprawnie skonfigurowano $routeProvider?

Używam MAMP localhost z adresem URL głównego aplikacji będącej http://localhost/teach/

Answer 1

Musisz skonfigurować swój Apache redirect all paths to root.

Po otwarciu bezpośrednio http://localhost/teach/overview serwer WWW próbuje wyświetlić stronę z trasy, która nie jest zdefiniowana.

Gdy w kanciastej aplikacji klikniesz link z href ścieżką http://localhost/teach/overview, Angularowe kroki w, i zamiast pozwolić przeglądarce zażądać strony z serwera przechwytuje zdarzenie click i idzie do routeProvider, aby zobaczyć widok po stronie klienta do wyświetlenia (dlatego nazywają to "aplikacjami jednostronicowymi"). Dlatego Twoje linki działają tak długo, jak starasz się nie otwierać ich bezpośrednio.

Obok config apache można również użyć base tag z href wartości /teach/:

<base href="/teach/" /> 

tak, że można mieć swój routeProvider nie ograniczone przez stałą prefix:

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

You może również użyć # w swoich URL-ach.

http://localhost/teach/#/overview 

To nie wyśle ​​żądania do serwera i zostanie przechwycone przez Angular $ routeProvider.