AngularJS-$ location html5Mode如何工作？

Question

我之所以這樣問，是因為有幾次，我嘗試將$locationProvider.html5Mode(true)命令與<base href="/">並遇到很多調用腳本/的錯誤。我的項目的樣式/圖像。 我想可能是我做錯了什么，但是您應該遵循某種文件夾結構，以免遇到這些錯誤嗎？ 還是我不太了解base href的特定工作方式？

最近，我想我會在一個非常小的應用程序上嘗試。 它實際上是一個靜態網站，但是我想利用Angular的路由來確保所有頁面都可以立即加載。 所以我的結構是這樣的：

my-project
    css
    images
    js
        angular
            app.js
            app.routes.js
            mainCtrl.js
    views
        home.html
        about.html
        contact.html
    index.html

所以我知道這個文件夾結構不是很好，但是我只會在這個項目中使用Angular進行路由，僅此而已，所以它滿足了我的需求。

我將<base href="/">放入頭部，放入ng-app和ng-controller主體，並且在主體內部也放入<div ng-view> 。

我添加了$locationProvider.html5Mode(true)並嘗試了該應用程序。 然后，我所有的腳本都被加載為http://localhost:8888/script.js ，這是不正確的。 該項目位於一個文件夾中，以便index.html位於http://localhost:8888/my-project/index.html 。 因此，例如，應該從http://localhost:8888/my-project/js/angular/app.js加載腳本。

關於base href是否有我不了解的內容？ 最終，我可能將此應用程序托管在在線某個位置，因此我希望腳本等的URL都與該文件真正相關。 有人有想法么？

好了，因此在base href標記上方，我將具有CSS樣式，該樣式將作為css/style.css鏈接，在body標記的底部，我的腳本將被加載為js/init.js或js/angular/app.js例如js/angular/app.js 。 這將嘗試加載它，就像js文件夾直接位於localhost:8888/js 。

Answer 1

Angular框架是一個單頁應用程序（SPA），它可以通過使用“哈希”（ # ）頁面錨點從本質上誘使瀏覽器運行代碼段而不是進行服務器調用，從而在瀏覽器中運行。 通常，帶有#的URL會跳到頁面中的特定錨點。 如果是Angular或其他類似的SPA框架，則將#重定向到代碼段。

理想情況下，您不必在頁面URL中引用此# 。 這就是Html5Mode起作用的地方。 Html5Mode可以使用HTML5推送狀態 （又稱為歷史記錄API） 隱藏 # 。

啟用Html5Mode時，頁面上的普通鏈接將被事件監聽器以無提示方式替換為Angular。 觸發這些事件后，會將當前頁面推送到瀏覽器歷史記錄中，並加載新頁面。 這給人一種幻覺，即您正在導航到新頁面，甚至允許后退按鈕進行操作。

當您處理正在運行的應用程序中單擊的鏈接時，這一切都很好，但是如果您從尚未將Angular加載到內存中的外部源導航到該頁面，則依賴事件偵聽器將無法工作。 要解決此問題，您必須從支持URL重寫的Web服務器加載頁面。 當服務器收到對沒有物理頁面的URL的請求時，服務器將重寫URL以加載基本HTML頁面，在該頁面中可以加載Angular並進行接管。

當Angular收到對以這種方式重寫的路線的請求時，它必須首先確定目標路線是什么。 這是Base HTML標記起作用的地方。 Angular使用Base引用來幫助它確定URL的哪一部分在服務器上以及哪一部分是客戶端路由。 本質上，如果未啟用Html5Mode，則URL中的#位於。

不幸的是， Base是一個HTML標記，瀏覽器不僅將其用於Angular。 瀏覽器還使用此標記來確定正確的位置，以使用相對路徑從中加載腳本和資源，而不管位置欄中的路徑如何。 通常，如果所有腳本和資源都與Index.html文件的位置有關，則這不是問題。 如果省略Base ，則瀏覽器將從當前URI確定的明顯的基本路徑中加載腳本。 但是，一旦提供，瀏覽器將使用您提供的任何值。

通常，除非您在網站的子頁面上托管有角度的腳本，並且希望用戶希望URL字符串中包含某些特定內容，否則應始終控制服務器的基礎，並在客戶端上使用Base="/"側。