web-dev-qa-db-ja.com

Angular UIルーターでの末尾のスラッシュの処理

この問題に取り組み始めてから何時間も経ちましたが、解決策に頭を悩ませることはできません。

ユーザーが実際にURLを入力する可能性のあるアプリがあります。このような場合、ユーザーが末尾のスラッシュを入力する可能性があると信じることは難しくありません。例えば、

www.example.com/users/2およびwww.example.com/edit/company/123

と同じように扱われるべきです

www.example.com/users/2/およびwww.example.com/edit/company/123/

これは、クライアント側でURLルーティングを処理するためにのみ行う必要があります。リソース/ API呼び出しの末尾のスラッシュの処理には興味がありません。私は、ブラウザで末尾のスラッシュを処理することにのみ興味があります。

それで、私は調べて、ネット上であまり多くの答えを見つけませんでした。それらのほとんどは、私をAngle-UIルーターのFAQセクションに導きました。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

ここで、彼らは私がやりたいことであるルールを書くように私たちに言いますが、それはうまくいかないようです、または多分私は間違っています。

コードを追加したplunkrは次のとおりです。

http://plnkr.co/edit/fD9q7L?p=preview

これを設定に追加しました。残りのコードは基本的なものです。

$urlRouterProvider.rule(function($injector, $location) {
  //if last charcter is a slash, return the same url without the slash
  if($location.$$url[length-1] === '/') {
    return $location.$$url.substr(0,$location.$$url.length - 2);
  } else {
    //if the last char is not a trailing slash, do nothing
    return $location.$$url;
  }
});

基本的に、末尾のスラッシュをオプションにします。つまり、アドレスバーの有無は、読み込まれた状態に影響を与えません。

angularjsangular-uiangular-ui-routerangular-routing
33
SLearner

動作するリンクがあります plunker

そして、これは更新されたルール定義です。

  $urlRouterProvider.rule(function($injector, $location) {

    var path = $location.path();
    var hasTrailingSlash = path[path.length-1] === '/';

    if(hasTrailingSlash) {

      //if last charcter is a slash, return the same url without the slash  
      var newPath = path.substr(0, path.length - 1); 
      return newPath; 
    } 

  });

そして、これらのリンクは適切に機能するようになります。

  <ul class="nav">
    <li><a ui-sref="route1">Route 1</a></li>
    <li><a ui-sref="route2">Route 2</a></li>
    <li><a href="#/route1/">#/route1/</a></li>
    <li><a href="#/route2/">#/route2/</a></li>
    <li><a href="#/route1" >#/route1</a></li>
    <li><a href="#/route2" >#/route2</a></li>
  </ul>

マジックは次のように定義できます：変更がある場合は変更された値を返します...それ以外の場合は何もしません...例を参照してください

26
Radim Köhler

Ui-routerバージョン .2.11 以降、これを行うことができます：

$urlMatcherFactoryProvider.strictMode(false);

これは、末尾のスラッシュの有無にかかわらずURLを同一に扱います。

13
othermachines

コメントを書くのに十分な担当者がいないので、答えを出してください：-

$urlMatcherFactoryProvider.strictMode(false);

$stateProvider.state部分の前にある必要があります。

6
openJT

urlMatcherFactoryProviderは、angular-ui-routerのv1.xの 非推奨 です。

代わりに_urlService.config.strictMode_（ ng1 、 ng2 ）を使用してください。

$stateProvider.state()の前にある必要があります。

_myApp.config(function($stateProvider, $urlServiceProvider) {
  var homeState = {
    name: 'home',
    url: '/home',
    component: 'xyHome'
  };

  $urlServiceProvider.config.strictMode(false);

  $stateProvider.state(homeState);
_

}）;

1
tbmpls

こんにちは、_strictMode = false_ Angular ui-routerがこのためのメソッドを提供するように設定する必要があります

_$urlMatcherFactoryProvider.strictMode(false); 
_

State $stateProvider.state({})を初期化する前に厳格モードを設定する必要があります

詳細については、こちらを参照してください リンク

1
abhaygarg12493