使用AngularJS及其路徑提供程序的純本地單頁應用程序

我目前正在嘗試構建一個運行閃存驅動器的「web應用程序」，因此不能有任何其他環境需要啓動chrome以及一些啓動選項以及閃存驅動器上index.html文件的路徑。使用AngularJS及其路徑提供程序的純本地單頁應用程序

我在使用file：//協議加載文件時沒有通過網絡服務器來獲取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文件時，URL以「file：//」開頭。當我通過命令行啓動必需的選項「--allow-file-access-from-files」時，也會發生這種情況。

如何讓routeProvider按照預期的方式使用file：//？目前，它是不承認甚至是「否則」路線，除非我加入的index.html

<base href="/index.html">

下我的頭標籤，但在結束了

file:///

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

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

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

來源

2013-12-11 bobber205

你是在Mac嗎？ – Niall

我是。爲什麼？這有什麼不同嗎？ :) – bobber205

角度文檔說「$路線用於深層鏈接網址」。 file：協議不是網址;沒有查詢字符串，碎片等，總之，它可能無法工作，而不修補角碼... – dandavis

您可以使用動態base標籤：

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

正如Plunkr所做的那樣。然後，您可以將第一個/從路徑中移除到模板以使其相對於基礎，並且Angular嘗試從正確的位置獲取模板。不過，您至少在Chrome瀏覽器中遇到了瀏覽器安全限制，即將來自file://的Ajax請求視爲跨域，即使從file://。

除了對瀏覽器安全設置進行任何更改外，解決方案是將模板寫入（或者有一些Grunt類型的構建過程來構建）模板直接插入到JS中，因此Angular不需要發出任何Ajax請求。例如

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

我也發現了HTML5的路由不會出現與file://工作，所以必須禁止。

我已經構建了一個simple plunkr that shows this，這也適用於下載時，至少在Chrome上使用Mac。我還製作了一個slightly more complicated plunkr，表明您可以在下載到文件時在諸如< - >#/inner之間的路線之間導航。

來源

2013-12-12 08:39:05

我已經添加了「--allow-file-access-from-files」是否還有其他安全設置需要設置？ – bobber205

我錯過了：我的解決方案假設沒有更改安全設置。假設你有「 - 允許從文件訪問文件」，並且它允許對文件系統發出Ajax請求，那麼實際上你不需要在JS中有模板。在任何情況下，您都不需要更改任何其他安全設置。 –

已經有業務需求來加載HTML5視頻等資源，因此需要安全設置。但很高興知道我不應該開啓/關閉其他任何東西。 – bobber205

使用AngularJS及其路徑提供程序的純本地單頁應用程序

回答

相關問題