ホームページ > 記事 > ウェブフロントエンド > AngularJS_AngularJS の URL から # 文字を削除する方法
AngularJS_AngularJS の URL から # 文字を削除する方法
- WBOYオリジナル
- 2016-05-16 15:53:541021ブラウズ
AngularJS はデフォルトで # 記号を使用して URL をルーティングします。
例:
http://example.com/
http://example.com/#/about
http://example.com/#/contact
クリーンな URL を取得し、URL からハッシュ記号を削除するのは簡単です。
2 つのことを完了するだけです。
- $locationProvider を構成する
- 相対接続の開始パスを設定します
$location サービス
Angular では、$location サービスがアドレス バーの URL を解決してアプリケーションに変更を加え、その逆も同様です。
$location サービスとそれが提供する機能を理解するには、Angular $location の公式ドキュメントを一読することを強くお勧めします。
$locationProvider と html5Mode
$locationProvider モジュールを使用し、html5Mode を true に設定します。
Angular アプリケーションを定義し、ルートを構成するときにこれを行います。
angular.module('scotchy', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
HTML5 History API とは何ですか? これは、Angular がページを更新せずにブラウザの履歴を操作するための標準的な方法です。詳細については、こちらをご覧ください。非常に優れた HTML5 History API の記事があります。
相対リンクの dde6fb694e6711ae5e6f381704c04ae4 を設定します
アプリケーション全体で相対リンクを使用するには、ドキュメントの d0ca8717887426b11deeb9d0fc502bbb を設定する必要があります。
<!doctype html> <html> <head> <meta charset="utf-8"> <base href="/"> </head>
これを設定する方法はたくさんありますが、HTML5Mode を true に設定すると、アプリケーションのルートが異なる場合 (/my-base など)、常に機能します。それを開始パスとして使用します。
古いブラウザのコールバック
$location サービスは、HTML5 閲覧履歴 API をサポートしていないブラウザに対して hashbang メソッドを自動的にコールバックします。
すべてが透過的に行われるため、設定を行う必要はありません。 Angular $location ドキュメントから、コールバック メソッドとその仕組みを確認できます。
概要
これは、Angular アプリで適切な URL を取得し、ハッシュ タグを削除する簡単な方法です。超クリーンで超高速な Angular アプリをお楽しみください。