web-dev-qa-db-ja.com

それ以外の場合はStateProvider

Angle-ui-routerを使用して、 otherwise method on $ stateProvider を使用するにはどうすればよいですか？

angularjsangular-uiangular-ui-router
93
Adelin

$stateProviderのみを使用することはできません。

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

$urlRouterProvider.otherwise('/otherwise');

/otherwise urlは通常どおり状態で定義する必要があります。

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

このリンクを参照してください ksperlingは説明します

121
Richard Keller

catch all syntax（$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(...)とは対照的に、このオプションの良いところは、場所の変更を強制されないことです。

81
Juan Hernandez

また、otherwise関数に$ stateを手動で挿入することもできます。これにより、非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+'"'
        });
    });
34
Zak Henry

わかりました、あなたが尋ねた質問がサンプルコードの最初の行で既に答えられていることに気づいた愚かな瞬間！サンプルコードをご覧ください。

       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
Adelin

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

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

追加の方法： https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

2
Babyburger

受け入れられた答え 参照angular-routeはui-routerについて尋ねます。受け入れられた答えは "monolithic"$routeProviderを使用します。これにはngRouteモジュールが必要です（一方、ui-routerにはui.routerモジュールが必要です）

最高評価の回答 は代わりに$stateProviderを使用し、.state("otherwise", { url : '/otherwise'... })のようなことを言っていますが、 ドキュメントitで「そうでなければ」の言及を見つけることができませんリンク 。ただし、$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-routerdocumentation 、（ この特定のリビジョン ）と一致しており、.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');
})
0
The Red Pea