AngularJS_AngularJS の URL から # 文字を削除する方法-jsチュートリアル-php.cn

AngularJS_AngularJS の URL から # 文字を削除する方法

WBOY

リリース： 2016-05-16 15:53:54

オリジナル

1057 人が閲覧しました

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 の記事があります。

相対リンクのを設定します

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

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

ログイン後にコピー

これを設定する方法はたくさんありますが、HTML5Mode を true に設定すると、アプリケーションのルートが異なる場合 (/my-base など)、常に機能します。それを開始パスとして使用します。

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

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

すべてが透過的に行われるため、設定を行う必要はありません。 Angular $location ドキュメントから、コールバックメソッドとその仕組みを確認できます。

2015619153430123.jpg (567×311)
概要

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