それ以外の場合はStateProvider


95

angular-ui-routerを使用して、$ stateProviderのotherwiseメソッドをどのように使用できますか、それをどのように使用できますか?


あなたは何をしようとしているのですか?(私は完全には理解していない$stateProvider.otherwiseので、それが私を助けてくれることに注意してください)
Kevin Meredith 14

回答:


123

だけでは使えません$stateProvider

次の$urlRouterProviderようなコードを挿入して作成する必要があります。

$urlRouterProvider.otherwise('/otherwise');

/otherwiseURLは、いつものような状態に定義する必要があります。

 $stateProvider
    .state("otherwise", { url : '/otherwise'...})

ksperlingが説明しているこのリンクを参照してください


実際に使用できます$stateProvider。テンプレートを表示するだけでリダイレクトは不要な場合は、作業が少なくなります。@ juan-hernandezの答えが好きです。
weltschmerz 2015

otherwise(この場合'/otherwise')に渡される値は、状態の名前(の最初のパラメーター.state)またはurlオプションの値と一致する必要がありますか?
d512 2016年

これは現在廃止されています- @babyburgerからの回答を
Vedran

81

キャッチオール構文()を$stateProvider使用すると、次のように、リストの一番下に状態設定を追加するだけです。"*path"

$stateProvider.state("otherwise", {
    url: "*path",
    templateUrl: "views/error-not-found.html"
});

すべてのオプションは、https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parametersで説明されています

このオプションの良い点は、とは対照$urlRouterProvider.otherwise(...)的に、場所の変更を強制されないことです。


詳しく説明していただけますyou're not forced to a location changeか?
ケビンメレディス

1
彼が意味することは、URLが元のままであることです。したがって、ユーザーがに/this/does/not/existアクセスすると、URLはアドレスバーにそのまま残ります。他の解決策はあなたを連れて行きます/otherwise
マットグリア14

私はあなたの解決策を使用し、それが機能しました(私はluisfarzati.github.io/angularticsを使用しているため、見つかりませんでしたurlを保持できます。これにより、見つからなかったページへのナビゲーションも表示されます)。ユーザーが移動するURLが存在しません。ただし、コントローラー内で$ state.go( 'otherwise')を使用してこのURLに移動すると、URLが失われます。ユーザーがアイテムの詳細ページに移動すると、この状態に明示的に移動し、サーバーが404を返します(たとえば、アイテムが削除された場合)。これを修正する方法を知っていますか?
pcatre 2014

@pcatreあなたはオプションの場所= falseを使用することができ、URLは変更されません。例えば。$ state.go( 'otherwise'、{}、{location:false})
JakubKnejzlik

35

$ stateをotherwise関数に手動で挿入することもできます。これにより、URL以外の状態に移動できます。これには、ブラウザがアドレスバーを変更しないという利点があります。これは、前のページに戻る処理に役立ちます。

    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');

        $state.go('defaultLayout.error', {
            title: "Page not found",
            message: 'Could not find a state associated with url "'+$location.$$url+'"'
        });
    });

それは我々が半ばアプリかどうかを確認する方法についての私の問題を解決するか、そうでない場合に使用されたときにonload - :)ありがとうございました
ジョーンBerkefeld

あなたは私の日を救った!
Maelig 2016

これを最小限にしたい場合は$ injectが必要かどうかを忘れないでください
Sten Muchow 2016年

3

さて、あなたが尋ねた質問がサンプルコードの最初の行ですでに答えられていることに気づいたばかげた瞬間!サンプルコードをご覧ください。

       angular.module('sample', ['ui.compat'])
      .config(
        [        '$stateProvider', '$routeProvider', '$urlRouterProvider',
        function ($stateProvider,   $routeProvider,   $urlRouterProvider) {
          $urlRouterProvider
            .when('/c?id', '/contacts/:id')
            .otherwise('/'); // <-- This is what I was looking for ! 


          ....

こちらをご覧ください。


3

私はすでに提供されている素晴らしい答えに触れたいだけです。の最新バージョンは@uirouter/angularjs、クラスUrlRouterProviderを非推奨としてマークしました。UrlService代わりに使用することをお勧めします。次の変更で同じ結果を得ることができます:

$urlService.rules.otherwise('/defaultState');

追加のメソッド:https : //ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html


0

受け入れ答えの参照angular-routeについて質問ui-router。受け入れられた回答は「モノリシック」を 使用しますが$routeProvider、これにはngRouteモジュールが必要です(モジュールがui-router必要ui.routerです)。

最高の定格の答えは使用しています$stateProvider代わりに、とのようなものを言います.state("otherwise", { url : '/otherwise'... })が、私はの「それ以外」の一切の言及を見つけることができません、それはリンクのドキュメントを。しかし、私はそれ$stateProviderが言っているこの答えで言及さているのを見る:

だけでは使えません$stateProvider。注射する必要があります$urlRouterProvider

それが私の答えがあなたを助けるかもしれないところです。私にとっては、次の$urlRouterProviderように使用するだけで十分です:

 my_module
   .config([
    , '$urlRouterProvider'
    , function(
        , $urlRouterProvider){
            //When the url is empty; i.e. what I consider to be "the default"
            //Then send the user to whatever state is served at the URL '/starting' 
            //(It could say '/default' or any other path you want)
            $urlRouterProvider
                    .when('', '/starting');
                    //...
    }]);

私の提案は、ui-router ドキュメントこの特定のリビジョン)と一貫しており、同様の使用法が含まれています。when(...)メソッド(関数の最初の呼び出し):

app.config(function($urlRouterProvider){
  // when there is an empty route, redirect to /index   
  $urlRouterProvider.when('', '/index');

  // You can also use regex for the match parameter
  $urlRouterProvider.when(/aspx/i, '/index');
})
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.