使用AngularJS及其RouteProvider的純本地單頁應用程序

Question

我目前正在嘗試構建一個運行在閃存驅動器上的“Web應用程序”，因此沒有任何其他環境需要啟動帶有一些啟動選項的chrome以及閃存驅動器上index.html文件的路徑。

我在使用file：//協議加載文件而不是通過Web服務器加載angularJS時遇到了一些麻煩。

我已經通過將html5模式設置為true來加載本地資源（如視頻）但我目前無法使用路由提供程序。

這就是我所擁有的：var testApp = angular.module（“testApp”，['angular-underscore'，“ngRoute”，“com.2fdevs.videogular”]）;

testApp.config(function($locationProvider, $routeProvider) {
    $locationProvider.html5Mode(true);
  $routeProvider.when('/', {template: '/views/MainView.html', controller: "VideoPlayerController" })
.otherwise({redirectTo:'/'});;
});

每當我通過雙擊文件在Chrome中加載我的index.html文件時，網址就會以“file：//”開頭。 當我通過命令行使用必要選項“--allow-file-access-from-files”啟動時，也會發生這種情況。

如何通過file：//使routeProvider按預期工作？ 除非我將以下內容添加到index.html中的head標簽，否則它目前無法識別“其他”路徑

<base href="/index.html">

但最終結果是

file:///

在Chrome的網址字段中。 所有其他資源都無法加載。 下面是一個我只看到一個控制器組合的錯誤的例子。

GET file:///index.html net::ERR_FILE_NOT_FOUND 

謝謝！ （我知道如果我願意使用網絡服務器，我的所有問題都會消失，但我現在不允許進入這個項目）

Answer 1

通過使用動態base標記，您可以獲得Angular方面的工作：

<script>document.write('<base href="' + document.location + '" />');</script>

正如普蘭克所做的那樣。 然后，您可以從模板的路徑中刪除第一個/以使它們相對於基礎，並且Angular嘗試從正確的位置獲取模板。 然而，您會遇到瀏覽器安全限制，至少在Chrome中，它將Ajax請求處理為file:// ，即使是從file://作為跨域。

除非對瀏覽器安全設置進行任何更改，否則解決方案是將模板編寫（或將一些Grunt類型的構建過程構建）模板直接放入JS中，因此Angular不必進行任何Ajax請求。 例如

app.run(function($templateCache) {
  $templateCache.put('views/MainView.html', 'In the MainView partial <strong>{{message}}</strong>');
});

我還發現HTML5路由似乎不適用於file:// ，因此必須禁用它。

我已經構建了一個簡單的plunkr來顯示這個 ，這個也可以在下載時使用，至少在使用Chrome的Mac上。 我還制作了一個稍微復雜一點的plunkr ，它表明你可以在下載到文件時在#/ < - > #/inner類的路線之間導航。