AngularJSのURLの#文字を削除する方法

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

AngularJSはデフォルトで#を使用してURLをルーティングします。

例えば:

Http://example.com/

Http://example.com/#/about

Http://example.com/#/contact

きれいなURLを取得してURLからハッシュを削除するのは簡単です。

それは2つのことを行います。

$ locationProviderの設定
相対的な接続の開始パスを設定する

$位置情報サービス

Angularでは、$ロケーションサービスはアドレスバーのURLを解析してアプリケーションに変更を行います(逆も同様です)。

$ Locationサービスとそれが提供する機能のアイデアを得るには、正式なAngular $ロケーションドキュメントを読むことを強くお勧めします。

$ locationProviderとhtml5モード(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履歴APIとはスクリプトを使用してブラウザの履歴を操作する標準的な方法ですが、Angularではページを更新せずにルーティングとページのURLを変更できます。良いHTML5履歴APIの記事

相対リンクに<base>を設定する

アプリケーション全体で相対リンクを使用するには、ドキュメントの<head>に<set>を設定する必要があります。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>

これを設定するにはいくつかの方法があり、HTML5Modeをtrueに設定すると相対リンクが自動的に解決されますが、この方法は私の場合には常に機能します。アプリケーションのルートとURL例えば/ my-baseのように違う場合は、そのパスを開始パスとして使用します。

古いブラウザのコールバック

$ locationサービスは、HTML5閲覧履歴APIをサポートしていないブラウザに対して、自動的にhashbangメソッドをコールバックします。

すべてがあなたに透過的に起こります。あなたはこれを行うために何もする必要はありません。 Angular $ロケーションのドキュメントから、コールバックメソッドがどのように機能するかを見ることができます。

Https://photo.yuedy.com/wp-content/uploads/2018/07/20180714202730-5b4a5cb204b80.jpg(567×311)
要約

これは、Angularアプリで素敵なURLを取得し、ハッシュタグを削除する簡単な方法です。 超クリーンで超高速の角型アプリをお楽しみください!


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ