web-dev-qa-db-ja.com

AngularJSのURLからフラグメント識別子を削除する（＃記号）

Angular.jsのURLから＃記号を削除することは可能ですか？

ビューを変更してURLをparamsで更新するときに、ブラウザの戻るボタンなどを使用できるようにしたいのですが、＃記号は望ましくありません。

チュートリアルのrouteProviderは次のように宣言されています。

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

＃なしで同じ機能を持つようにこれを編集できますか？

angularjsurlngroute
250
Tim Webster

はい、 $locationProvider を設定し、 html5Mode をtrueに設定する必要があります。

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);
248
Maxim Grach

Html5 history APIのブラウザサポートを必ず確認してください。

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }
55
SSaidi

プリティーURLのハッシュタグを削除し、コードを縮小後に機能させるには、以下の例のようにコードを構造化する必要があります。

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);
45
Digitlimit

私は$locationProvider.html5Mode(true)がapp.jsに設定された後にweb.configにルールを書き出します。

願って、誰かを助けます。

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

私のindex.htmlでこれを<head>に追加しました

<base href="/">

サーバー上のIISのURLリライタをインストールすることを忘れないでください。

また、Web ApiとIISを使用している場合、この一致URLは機能しません。これは、API呼び出しが変わるためです。 3番目の入力（3行目の条件）を追加し、www.yourdomain.com/apiからの呼び出しを除外するパターンを指定します。

18
Yagiz Ozturk

MVCとAngularJSを使用して.NETスタックにいる場合は、URLから「＃」を削除する必要があります。

  1. _Layoutページでベースのhrefを設定します。<head> <base href="/"> </head>

  2. それから、Angular App Configに以下を追加します。$locationProvider.html5Mode(true)

  3. 上記はURLから '＃'を削除しますが、ページの更新は機能しません。あなたが "yoursite.com/about"ページにいるならば、refreashはあなたに404を与えるでしょう。これはMVCが角度ルーティングについて知らないので、そしてMVCパターンによってそれがMVCに存在しない 'について'のMVCページを探すでしょうルーティングパスこれを回避するには、すべてのMVCページ要求を単一のMVCビューに送信します。そのためには、すべてをキャッチするルートを追加します。

uRL：

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);
10
Maksood

あなたはhtml5modeを微調整することができますが、それはあなたのページのhtmlアンカーに含まれているリンクとURLがブラウザのアドレスバーにどのように見えるかについてだけ機能的です。ハッシュタグなしで（html5modeの有無にかかわらず）サブページをページの外側から要求しようとすると、404エラーが発生します。たとえば、次のCURL要求は、html5modeに関係なく、ページが見つかりませんというエラーになります。

$ curl http://foo.bar/phones

以下はルート/ホームページを返します。

$ curl http://foo.bar/#/phones

これは、リクエストがサーバーに到着する前にハッシュタグの後にあるものはすべて削除されるためです。そのためhttp://foo.bar/#/portfolioの要求は、http://foo.barの要求としてサーバーに到着します。サーバーはhttp://foo.barに対して200 OK応答（おそらく）で応答し、エージェント/クライアントは残りを処理します。

あなたが他の人とURLを共有したい場合は、ハッシュタグを含める以外に選択肢はありません。

5
chris

2つのステップに従ってください -
1。まず設定 $ locationProvider.html5Mode（true） アプリの設定ファイルで。
例えば -
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.セカンドセット <ベース> メインページの中.
例えば - >
<base href="/">

$ locationサービスは自動的にHTML5 History APIをサポートしていないブラウザのハッシュパートメソッドにフォールバックします。

5
Anshul Bisht

私の解決策は、.htaccessを作成し、＃ソリアンコードを使用することです。

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]
3
Thomas Knápek

上記の回答で述べたように、ステップは次のとおりです。

Index.htmlに追加するapp.jsでhtml5mode $ location.html5Mode（true）を有効にします。

これでアプリケーションはうまくいくでしょう。ただし、index.htmlから他のページに移動したときのシナリオでのみです。たとえば、私のベースページはwww.javainuse.comです。リンクJavaをクリックすると、www.javainuse.com/Javaに正しく移動します。

しかし、私は直接www.javainuse.com/Javaに移動した場合、ページが見つかりませんエラーが表示されます。

これを解決するには、URLの書き換えを使用する必要があります。 Dot netはIIS用のURL書き換えを必要とします。

Tomcatを使用している場合は、URLの書き換えはTuckeyを使用して行う必要があります。 URLの書き換え に関する詳細情報はこちら

3
Rameez

これは本当に遅れていると思います。しかしapp.moduleのインポートに下記の設定を追加することで仕事ができます。

RouterModule.forRoot(routes, { useHash: false })
1
Sagar Bhat

Index.htmlから開始し、#からすべての<a href="#/aboutus">About Us</a>を削除するので、<a href="/aboutus">About Us</a>のようにする必要があります。index.htmlの先頭タグに、最後のメタタグの直後に<base href="/">を書き込みます。

今すぐあなたのルーティングの中でjsは$locationProviderを注入し、$locatonProvider.html5Mode(true);と書きます。

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

詳細については、このビデオをご覧ください https://www.youtube.com/watch?v=XsRugDQaGOo

1
Aniket Jha

この回答は、リバースプロキシとしてnginxを使用していて、すでに$ locationProvider.html5modeをtrueに設定していることを前提としています。

- >上記のクールなものすべてにまだ苦労している可能性がある人々のために。

確かに@maxim grachソリューションはうまくいきますが、ハッシュタグを最初から含めたくないようなリクエストへの応答方法の解決策としてはphpが404を送っているかどうかを確認してからURLを書き換えることです。以下はnginxのコードです。

Phpの場所で、404 phpエラーを検出して別の場所にリダイレクトします。

location ~ \.php${
  ...
  fastcgi_intercept_errors on;
  error_page 404 = /redirect/$request_uri ;
}

それからリダイレクトの場所にURLを書き換えて、データをproxy_passして、オフコースに、あなたのウェブサイトのURLを私のブログのURLの場所に置いてください。 （依頼：試してから質問してください）

location /redirect {
  rewrite ^/redirect/(.*) /$1;
  proxy_pass http://www.techromance.com;
}

そして魔法を見なさい。

そしてそれは間違いなく動作します、少なくとも私にとっては。

1
Satys

資料によると。あなたが使用することができます：

$locationProvider.html5Mode(true).hashPrefix('!');

注意：お使いのブラウザがHTML 5をサポートしていない場合は、心配しないでください。Dハッシュバングモードにフォールバックします。そのため、手動でif(window.history && window.history.pushState){ ... }をチェックする必要はありません。

例：クリックした場合：<a href="/other">Some URL</a>

HTML5ブラウザ：angleは自動的にexample.com/otherにリダイレクトされます

HTML5ブラウザではない：angleは自動的にexample.com/#!/otherにリダイレクトされます

1
Efriandika Pratama

ステップ1：アプリの設定のコンストラクタに$ locationProviderサービスを挿入します

ステップ2：アプリケーション設定のコンストラクタにコード行$ locationProvider.html5Mode（true）を追加します。

ステップ3：コンテナ（ランディング、マスター、またはレイアウト）ページで、タグの内側に<base href="/">などのhtmlタグを追加します。

ステップ4：すべてのアンカータグからrouting configのすべての '＃'を削除します。 "href =" contact "になる

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>
0
Thomas.Benz