AngularJSとRouteProviderを使用した純粋なローカルシングルページアプリケーション

Question

私は現在、フラッシュドライブから実行される "Webアプリケーション"を構築しようとしています。したがって、他の環境では起動オプションおよびフラッシュドライブ上のindex.htmlファイルへのパスです。

file：//プロトコルを使用してファイルを読み込んで、Webサーバーではなく、ファイルをうまく再生するために、angularJSをうまく動かすにはいくつか問題があります。

html5モードをtrueに設定してローカルリソース（ビデオなど）をロードするようになっていますが、現在はルートプロバイダを使用できません。

ここに私のものがあります： var testApp = angular.module（ "testApp"、['angle-underscore'、 "ngRoute"、 "com.2fdevs.videogular"]）;

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

ファイルをダブルクリックしてindex.htmlファイルをChromeにロードすると、URLは「file：//」で始まります。これは、コマンドラインで必須ファイル "--allow-file-access-from-files"を指定して起動する場合にも発生します。

routeProviderをfile：//で意図したとおりに動作させるにはどうすればよいですか？私はindex.htmlを

<base href="/index.html"> 

に私の頭のタグに以下を追加しますしかし、それはクロムのURL欄に

file:/// 

で終了しない限り、それは現在でも「それ以外」のルートを認識していません。他のすべてのリソースが読み込まれません。 以下は、1つのコントローラコンボだけで表示されるエラーの例です。

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

ありがとうございます！ （Webサーバーを使用しても構わないと思っていますが、今はこのプロジェクトには参加できません）

Answer 1

動的なものを使用すると、角度のある側を動かすことができますbaseタグ：

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

とPlunkrがあります。最初の/をテンプレートのパスから削除して、ベースに対して相対パスを作成し、Angularで正しい場所からテンプレートをフェッチしようとします。しかし、少なくともChromeではAjaxリクエストをfile://に処理するブラウザのセキュリティ制約が、クロスドメインとしてfile://であっても実行されます。

ブラウザのセキュリティ設定に変更がない場合、その解決策はテンプレートをJSに書き込む（またはGruntタイプのビルドプロセスを作成する）ことで、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のようなルートをナビゲートできることを示しています。