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

Question

angle.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'});
}]);

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

score 253 · Accepted Answer

はい、次のように構成$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);

  }]);

score 56 · Accepted Answer

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

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

score 47 · Accepted Answer

きれいな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
          });
        }
    }]);

score 18 · Accepted Answer

$locationProvider.html5Mode(true)に設定した後、web.configにルールを書きapp.jsます。

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

  <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

score 11 · Accepted Answer

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

_Layoutページでベースhrefを設定します。<head> <base href="/"> </head>
次に、Angularアプリの構成に以下を追加します：$locationProvider.html5Mode(true)
上記はURLから「＃」を削除しますが、ページの更新は機能しません。たとえば、「yoursite.com/about」ページにいる場合、ページの再更新は404になります。これは、MVCが角度ルーティングとMVCパターンによってそれを認識していないためです。 MVCルーティングパスに存在しない「about」のMVCページを探します。この回避策は、すべてのMVCページリクエストを単一のMVCビューに送信することです。これを行うには、すべてをキャッチするルートを追加します。

url：

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

score 6 · Accepted Answer

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

$ curl http://foo.bar/phones

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

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

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

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

score 5 · Accepted Answer

次の2つの手順に従います。1
。まず、アプリの構成ファイルで$ locationProvider.html5Mode（true）を設定します。
たとえば-
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.次に、メインページ内に<base>を設定します。
たとえば->
<base href="/">

$ locationサービスは、HTML5HistoryAPIをサポートしていないブラウザーのhash-partメソッドに自動的にフォールバックします。

score 3 · Accepted Answer

私の解決策は、.htaccessを作成し、＃Sorianコードを使用することです。.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]

score 1 · Accepted Answer

ドキュメントによると。次を使用できます。

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

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

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

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

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

score 1 · Accepted Answer

この回答は、リバースプロキシとして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の場所にWebサイトのURLを配置します。（リクエスト：試してみてから質問してください）

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

そして魔法を見てください。

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

score 1 · Accepted Answer

#index.htmlから開始して、からすべてを削除します。そのため、次の<a href="#/aboutus">About Us</a>ようになります<a href="/aboutus">About Us</a>。index.htmlのheadタグで、最後のメタタグ<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

score 1 · Accepted Answer

これは本当に遅いと思います。ただし、以下の構成をapp.moduleインポートに追加すると、次のようになります。

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

score 0 · Accepted Answer

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

手順2：コード行$ locationProvider.html5Mode（true）をアプリ構成のコンストラクターに追加します。

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

ステップ4：すべてのアンカータグからルーティング設定のすべての「＃」を削除します。たとえば、href = "＃home"はhref = "home"になり、href = "＃about"はherf = "about"; href = "＃contactになります。 "は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>

score -1 · Accepted Answer

追加するだけ$locationProviderです

.config(function ($routeProvider,$locationProvider)

その後に追加$locationProvider.hashPrefix(''); します

.otherwise({
        redirectTo: '/'
      });

それでおしまい。

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

14 に答える 14

Related

Reference