226

私はAngularJSを学んでいますが、本当にイライラすることが1つあります。

$routeProviderアプリケーションのルーティングルールを宣言するために使用します。

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

しかし、ブラウザでアプリに移動すると、app/#/testの代わりに表示されapp/testます。

だから私の質問は、AngularJSがこのハッシュ#をURLに追加する理由です。それを回避する可能性はありますか？

4

10 に答える 10

268

実際、非 HTML5 ブラウザーには # (ハッシュタグ) が必要です。

それ以外の場合は、前述の href でサーバーへの HTTP 呼び出しを行うだけです。# は、リクエストを起動しない古いブラウザー ショートサーキットであり、多くの js フレームワークが独自のクライアント側の再ルーティングを構築できるようにします。

利用可能な場合、HTML5 戦略を使用$locationProvider.html5Mode(true)するように angular に指示するために使用できます。

HTML5 戦略をサポートするブラウザのリスト: http://caniuse.com/#feat=history

于 2013-01-14T14:36:01.890 に答える
30

試す

$locationProvider.html5Mode(true)

$locationProviderの詳細情報 $location の
使用

于 2013-01-14T14:29:41.047 に答える
12

次の情報は
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtagからのものです。

きれいな URL を取得して、Angular の URL からハッシュタグを削除するのは非常に簡単です。
デフォルトでは、AngularJS はハッシュタグ付きの URL をルーティングします。例:

実行する必要があることが 2 つあります。

  • $locationProvider の設定

  • 相対リンクの基盤を設定する

  • $location サービス

Angular では、$location サービスがアドレス バーの URL を解析し、アプリケーションに変更を加えます。その逆も同様です。

公式の Angular $location ドキュメントを読んで、位置情報サービスとそれが提供するものを理解することを強くお勧めします。

https://docs.angularjs.org/api/ng/service/$location

$locationProvider と html5Mode

  • $locationProvider モジュールを使用し、html5Mode を true に設定します。

  • これは、Angular アプリケーションを定義し、ルートを構成するときに行います。

    angular.module('noHash', [])

.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 はページを更新せずにページのルーティングと URL を変更できます。詳細については、HTML5 History API の優れた記事をご覧ください。

http://diveintohtml5.info/history.html

相対リンクの設定

  • 相対リンクを使用してアプリケーションをリンクするには、ドキュメント<base>の にを設定する必要があり<head>ます。これは、Angular アプリのルート index.html ファイルにある場合があります。タグを見つけて<base>、アプリに使用するルート URL に設定します。

例えば：<base href="/">

  • これを構成する方法は他にもたくさんあります。HTML5 モードを true に設定すると、相対リンクが自動的に解決されます。アプリケーションのルートが URL (たとえば /my-base など) と異なる場合は、それをベースとして使用します。

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

  • $location サービスは、HTML5 History API をサポートしていないブラウザーの hashbang メソッドに自動的にフォールバックします。
  • これは透過的に行われ、機能するために何も構成する必要はありません。Angular $location docs から、フォールバック方法とその仕組みを確認できます。

結論は

  • これは、きれいな URL を取得し、Angular アプリケーションでハッシュタグを削除する簡単な方法です。超クリーンで超高速な Angular アプリの作成を楽しんでください!
于 2015-12-07T19:26:56.110 に答える
3

Angular with Apache を提供する OS X 10.8 でこれをローカルに構成したい場合は、.htaccess ファイルに次の記述が役立つことがあります。

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

オプション +FollowSymlinks が設定されていない場合、次のような禁止エラーがログに記録される場合があります。

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

ベースの書き換えが必要です。それ以外の場合、リクエストはサーバー ルートに解決されます。これは、vhosts を具体的に構成していない限り、ローカルではデフォルトでプロジェクト ディレクトリではありません。そのため、リクエストがプロジェクト ルート ディレクトリを見つけるようにパスを設定する必要があります。たとえば、私のマシンには、すべてのプロジェクトを保持する /Users/me/Sites ディレクトリがあります。古いOS Xのセットアップのように。

次の 2 行は、パスがディレクトリでもファイルでもないかどうかを効果的に示しているため、アプリのルート パスと同じファイルやディレクトリがないことを確認する必要があります。

次の条件は、リクエストが指定されたファイル拡張子で終わっていないかどうかを示しているので、そこに必要なものを追加してください

そして [L] の最後のものは index.html ファイルを提供するように言っています - あなたのアプリは他のすべてのリクエストのために。

それでも問題が解決しない場合は、apache ログを確認してください。おそらく役立つヒントが得られるでしょう。

/private/var/log/apache2/error_log
于 2014-01-31T16:19:28.447 に答える