[解決済み] AngularJSのHTML5モードでページを再読み込みすると、間違ったGETリクエストが表示される
質問
アプリでHTML5モードを有効にしたいのですが、どうすればいいですか?以下のようなコードを設定に置きました。 ここで :
return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider.when('/', {
templateUrl: '/views/index.html',
controller: 'indexCtrl'
});
$routeProvider.when('/about',{
templateUrl: '/views/about.html',
controller: 'AboutCtrl'
});
ご覧の通り、私は
$locationProvider.html5mode
ですべてのリンクを変更しました。
ng-href
を除外するために
/#/
.
問題点
現在、私は
localhost:9000/
のように、インデックスページを表示し、他のページに移動することができます。
localhost:9000/about
.
を更新すると、問題が発生します。
localhost:9000/about
ページが表示されます。次のような出力が得られます。
Cannot GET /about
ネットワークコールを見てみると
Request URL:localhost:9000/about
Request Method:GET
一方、最初に
localhost:9000/
に移動するボタンをクリックします。
/about
と出る。
Request URL:http://localhost:9000/views/about.html
これは、ページを完全にレンダリングします。
リフレッシュ時に正しいページを取得するために、angularを有効にするにはどうすればよいですか?
どのように解決するのですか?
からの angularドキュメント
<ブロッククオート
サーバーサイド
このモードを使用するには、サーバー側でURLの書き換えが必要です。基本的に、アプリケーションのエントリポイント(例:index.html)へのリンクをすべて書き換える必要があります。
その理由は、最初にページにアクセスしたとき(
/about
ブラウザはこれが本当のURLでないことを知る由もなく、そのまま読み込んでしまうのです。しかし、最初にルートページとすべてのJavaScriptコードを読み込んだ場合、次のページに移動したときに
/about
Angularはブラウザがサーバーにアクセスする前にそこに入り、それに応じて処理することができます。
関連
-
[解決済み] `ui-router` $stateParams vs. $state.params
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] ajaxリクエスト時にAngularjsのローディング画面が表示される。
-
[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断!?
-
[解決済み] AngularJS : ローカルストレージを使用する
-
[解決済み] 新しい/分離されたスコープを求める複数のディレクティブ [ngController, ...] がある。
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 1.2+ で ng-bind-html-unsafe を複製するために $sce.trustAsHtml(string) を使用するにはどうしたらよいですか?
-
[解決済み] ajaxリクエスト時にAngularjsのローディング画面が表示される。
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
[解決済み] AngularJS の ng-disabled ディレクティブに式を指定しても動作しない
-
[解決済み] md-selectでデフォルト値を設定する方法
-
angularjs が src で指定されたコンテンツを iframe 内で正しく表示しない
-
angularjs統合ueditor入門
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] Angular 2.0のルーターがブラウザーの再読み込みで動作しない件
-
[解決済み] $location/html5とhashbangモードの切り替え/リンクのリライト