web-dev-qa-db-ja.com

Angular UI Routerでデフォルトの子ビューを設定する方法

次の3つのAngular UIルーターの状態があるとします。

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

adminCompaniesが直接に移行される場合、Angular UI RouterにadminCompanies.list代わりに状態？

理想的には、私がしたいことは次のようなものです：

$stateProvider.when('adminCompanies', 'adminCompanies.list');

私のコードでは、$ state.go（ 'adminCompanies'）を$ state.go（ 'adminCompanies.list'）と同等にしたい

javascriptangularjsparent-childangular-ui
29
egervari

アプリケーションは現在設定されているため、これについて明示的なロジックは必要ありません。サブステートに空のurlプロパティがある場合、親ステートがアクティブになると同時にアクティブになります。サブ状態のテンプレートは、親状態のテンプレートによって提供されるui-viewディレクティブに挿入されます。 Angular UI サンプルアプリケーション は、このタイプのアーキテクチャに対応します。contacts状態がナビゲートされると、その template はナビゲーションレイアウトも提供しますサブ状態の別個のui-viewとして; contacts.list状態は""のurlプロパティを持っているため、親状態contactsにナビゲートされると自動的にロードされます。アプリケーションの comments ：

空のURLを使用すると、親のURLに移動すると、この子の状態がアクティブになります。子状態のURLは、親のURLに自動的に追加されます。したがって、この状態のURLは '/ contacts'です（ '/ contacts' + ''のため）。

さて、何らかの理由で、あなたはneverが親のadminCompanies状態をアクティブにしたいと思っていました。この場合、その状態を abstract のような状態にすることができます：

$stateProvider
    .state('adminCompanies', {
        abstract: true,
        url: "/admin/companies",
        template: '<div ui-view class="viewContainer" autoscroll="false" />'
    })
    .state('adminCompanies.list', {
        url: "/list",
        templateUrl: 'app/admin/companies/companies.list.html',
        controller: 'AdminCompaniesController'
    })
    .state('adminCompanies.detail', {
        url: "/:companyId",
        templateUrl: 'app/admin/companies/companies.detail.html',
        resolve: {
            company: function(Model, $stateParams) {
                return Model.get("/admin/companies", $stateParams.companyId);
            }
        },
        controller: 'AdminCompanyDetailController'
    })

3行目のabstract: true追加と、/listのadminCompanies.listの明示的な状態URLの追加に注意してください

これは、Angular-UIに、この状態をURLナビゲーションのために存在しないかのように処理するよう指示します。ただし、サブステートに移動してもアクティブになりますので、指定したURLを使用してサブステートのURLのプレフィックスを付けます。ただし、別の状態からナビゲートしようとすると、状態が存在しないかのように動作します。このため、$urlRouteProviderを使用して、一致しないURLの処理も追加する必要があります。

$urlRouteProviderの基本的な使用法は次のようになります。

$urlRouterProvider.otherwise("/")

これは、存在しない状態へのすべての呼び出しを、URLが「/」の状態にリダイレクトするだけです。これはあなたが持っていることを前提としています。ただし、誰かがリストビューに移動しようとしているが、/admin/companiesに直接移動している可能性があるため、おそらく次のようなハンドラーが必要です。

$urlRouterProvider.when("/admin/companies", "/admin/companies/list");

どちらを使用するかは、アプリケーションのアーキテクチャによって異なりますが、現在のニーズでは何もする必要はないようです。仕様が変更された場合、抽象的な状態が役立つ場合があります。

39
David Antaramian

i-router-default -_abstract: ".defaultChild"_を設定することにより、デフォルトの子状態が親状態で定義されるモジュールを使用することもできます。

これには、_ui-sref="parent"_および$state.go("parent");（navbarを動的に作成するときに重要だった）を使用できるという利点があります。

注意：これとデビッドのソリューションはどちらも、親の状態が抽象の場合にのみ機能します。つまり、子をアクティブにせずに親をアクティブにすることはできません。

（ui-routerチームの関連する議論も参照してください here 。）

2
StevieP

バージョン1.0.0alpha0では、最終的に可能になりました！抽象状態の子ではなく、新しい$ transitionsProviderで定義できますonBefore 針。状態オプションに応じて動作を変更できます。

たとえば、「抽象」パラメータの動作を変更できます。

 $transitionsProvider.onBefore({
    to: state => !!state.abstract
  }, ($transition$, $state) => {
    if (angular.isString($transition.to().abstract)) {
      return $state.target($transition.to().abstract);
    }
  });

そして次のように使用します：

  abstract: 'abstract2.foo',  //use not boolean but exact child state

コード例

i-router：抽象状態のデフォルトの子

1
Stepan Suvorov