路由和乾淨的路徑（沒有標籤）不工作在angularJS

Question

夥計們這讓我瘋狂，一直在這上面奮鬥了幾個小時，並且找不到解決方案！

我知道，爲了從URL路徑清潔井號標籤，我需要使用

$locationProvider.html5Mode(true);

但出於某種原因，這不是爲我工作很好，我現在使用的是Tomcat 7順便說一句來運行這個。

這是我的HTML進口，既AngularJS東西是V1.2.6：

<script type="text/javascript" src="angular/angular.min.js"></script> 
    <!-- Angular Libraries --> 
    <script type="text/javascript" src="angular/angular-route.js"></script> 
    <!-- This one handles the alert notifications --> 
    <script type="text/javascript" src="angular/angular-flash.min.js"></script> 

    <!-- App related libraries --> 
    <script type="text/javascript" src="js/services/portfolioServices.js"></script> 
    <script type="text/javascript" src="js/controllers/myWorkControllers.js"></script> 
    <script type="text/javascript" src="js/controllers/navController.js"></script> 
    <script type="text/javascript" src="js/controllers/aboutController.js"></script> 
    <script type="text/javascript" src="js/controllers/contactController.js"></script> 
    <script type="text/javascript" src="js/directives/portfolioDirectives.js"></script> 

然後，這是我的服務的JavaScript與配置

這些控制器的

portfolioApp = angular.module('portfolioApp', ['ngRoute']); 

portfolioApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/mywork', { 
      templateUrl: 'partials/mywork.htm', 
      controller: 'myWorkController' 
     }) 
     .when('/about', { 
      templateUrl: 'partials/about.htm', 
      controller: 'aboutController' 
     }) 
     .when('/contact', { 
      templateUrl: 'partials/contact.htm', 
      controller: 'contactController' 
     }) 
     .otherwise({redirectTo: '/mywork'});  
     $locationProvider.html5Mode(true); 
}]); 

是每隻定義了，沒什麼特別的，名字和函數注入$ scope。他們什麼都沒有。

基本上不使用html5Mode的URL是

http://localhost:8080/template/#/ 

我想是：

http://localhost:8080/mywork 
http://localhost:8080/about 
http://localhost:8080/contact 

現在，我可以把它的工作......通過訪問http://localhost:8080/template它被重定向到那些網址的上面......但是當我用Ctrl + F5刷新網頁時，我從Tomcat中得到了404 Not Found！ ：S怎麼回事？該路徑不應該通過角來解決？

請問我在這裏做錯了什麼？我真的惹毛了HAHAH

順便說一下，以防萬一你想知道我的項目目錄是如何，下面是它的一個screeshot：

http://puu.sh/5UI0Z.png

這是我目前的web.xml

<web-app id="WebApp_ID" version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
    <display-name>Portfolio Application</display-name> 

    <!-- Auto scan rest service --> 
    <context-param> 
     <param-name>resteasy.scan</param-name> 
     <param-value>true</param-value> 
    </context-param> 

    <context-param> 
     <param-name>resteasy.servlet.mapping.prefix</param-name> 
     <param-value>/rest</param-value> 
    </context-param> 

    <listener> 
     <listener-class> 
      org.jboss.resteasy.plugins.server.servlet.ResteasyBootstrap</listener-class> 
    </listener> 


    <servlet> 
     <servlet-name>resteasy-servlet</servlet-name> 
     <servlet-class> 
      org.jboss.resteasy.plugins.server.servlet.HttpServletDispatcher</servlet-class> 
    </servlet> 

    <servlet-mapping> 
     <servlet-name>resteasy-servlet</servlet-name> 
     <url-pattern>/rest/*</url-pattern> 
    </servlet-mapping> 

</web-app> 

在此先感謝。

Answer 1

我還沒有嘗試過自己，但從我所知道的，你必須確保你的服務器只是返回這些不存在的URL的初始HTML頁面。然後當頁面重新加載時，一個onload事件將被觸發，您可以通過history.state訪問最後一個狀態。我猜測角將自動恢復狀態，所以你不必擔心這一點。

Answer 2

當您點擊F5時，您並未使用角度指令或任何角度相關的東西。您只需告訴瀏覽器向當前位於地址欄中的URL發送新請求，並使用服務器返回的內容刷新頁面。因此，如果當前位置爲http://localhost:8080/mywork，則會向http://localhost:8080/mywork發送請求，並且如果服務器沒有任何配置處理此URL的內容，則會得到404。

現在，如果您將服務器配置爲當網址/mywork被點擊時返回主角HTML頁面，那麼瀏覽器將顯示此HTML頁面並執行其包含的JavaScript。角路由器將檢測到該位置是/ mywork，並且它將加載與該位置相關的部分和控制器，並顯示適當的模板。

舊的基於hashbang的路由不需要任何後端配置，因爲URL總是相同的。只有hashbang之後的部分（服務器未知）發生變化。

Answer 3

我在web.xml中

加入當你手動刷新目標頁面，將404page重定向到你的主頁解決此問題。然後角路由器將生效將其路由到目標頁面。