AngularJS - 更改URL地址時，$ routeProvider似乎爲何不工作，我得到一個404錯誤

Question

我$routeProvider配置是這樣的：

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

內的應用程序，如果我點擊，例如一個鏈接<a href="/teach/overview">Overview</a>，概覽部分顯示如預期。但是，當我手動將地址欄中的URL更改爲完全相同的URL時，出現404錯誤。 $routeProvider配置不正確？

我使用MAMP localhost通過應用爲http://localhost/teach/

Answer 1

的根URL您需要設置你的阿帕奇redirect all paths to root。

當您直接打開http://localhost/teach/overview時，您的Web服務器正嘗試從未定義的路由中提供頁面。

在一個角度應用程序中，當你點擊一個href路徑爲http://localhost/teach/overview的Angular步驟的鏈接，而不是讓你的瀏覽器從服務器請求一個頁面時，它攔截你的點擊事件並去你的routeProvider看看哪個客戶端視圖可以顯示（這就是爲什麼他們稱之爲「單頁面應用程序」）。這就是爲什麼只要您不嘗試直接打開它們，您的鏈接就能正常工作。

除了你可能也想用base標籤與/teach/ href的值Apache的配置：

<base href="/teach/" /> 

，這樣你可以有你routeProvider沒有固定的前綴限制：

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

你也可以在您的網址中使用＃。

http://localhost/teach/#/overview 

這不會向服務器發送請求，而是被Angular $ routeProvider攔截。