web-dev-qa-db-ja.com

抽象状態を使用する目的は何ですか？

チュートリアルのAngularUIプロジェクトに取り組んでいます。状態、ネストされた状態、抽象状態についてすべて読みました。問題は、抽象状態を使用する理由と時期を理解できないことです。

angularjsroutingangular-ui-routersingle-page-applicationangularjs-routing
16
Michael

抽象状態は、あなたが書いた状態に直接アクセスできないことを意味します。抽象状態は、子供が接続するために独自の状態を必要とします。

子の状態をロードすると呼び出されます。抽象状態を使用してページの初期パターンを定義できます。ユーザープロフィールとソーシャルページを表示したいソーシャルメディアサイトの例を取り上げてみましょう。そのため、abstract状態を1つ持つことができます。これには、url: ""があり、ページの基本的なレイアウトがあります。 header、content＆footerのような名前付きビュー。 header＆footer名前付きビューは、抽象状態で埋められます。次に、子は、表示されるモジュールに応じてコンテンツが何であるかを定義します。 /profileはuserProfile.htmlを表示し、/socialはユーザーのソーシャルページsocial.htmlを表示します。

構成

app.config(function($stateProvider){
  $stateProvider.state("app":
  {
    url: "", //you can have the default url here..that will shown before child state url
    abstract: true,
    views: {
       '': {
          templateUrl: 'layout.html',
          controller: 'mainCtrl'
       },
       'header': {
          templateUrl: 'header.html'
       },
       'footer': {
          templateUrl: 'footer.html'
       }
    },
    resolve: {
       getUserAuthData: function(userService){
           return userService.getUserData();
       }
    }

  })
  .state("app.profile": {
      'content@app': {
          templateUrl: 'profile.html',
          controller: 'profileController'
      }
  })
  .state("app.social": {
      'content@app': {
          templateUrl: 'social.html',
          controller: 'socialController'
      }
  })
})

abstractのその他の主な機能は、共通の解決策があり、子の状態またはイベントリスナーで使用するデータを介して継承されたカスタムデータを提供できることです。また、OnEnterをロードする前にOnExitとstateを使用して、stateからロードする前に確認することもできます。

21
Pankaj Parkar

Hit\transitionedにできる状態が必要ない場合は、それを抽象的な状態にすることができます。例

\A
\A.B
\A.B.C

ユーザーに単に\Aに移動させたくない場合は、abstractにする必要があります。

5
AD.Net

基本的に、抽象状態は、さまざまな状態から親の抽象状態に共通の機能を移動するのに役立ちます。

典型的な例は、ユーザー名、ローカリゼーション設定、メタデータのロードを処理する状態です。ユーザーがそれだけをロードする状態にリダイレクトしないようにします。すべての状態にリダイレクトされたときに常に読み込まれるようにしたい

/sessionは抽象的ですが/session/main、/session/detailはしません。依存関係によって、mainとdetailの両方の状態に移行するときにセッションデータが読み込まれますが、ユーザーがsession状態に移行することは望ましくありません。

3
Sulthan

抽象状態

いくつかの州で利用可能ないくつかの一般的な情報が必要になる状況があります。この目的のために、UI-Routerは抽象的な状態を指定する可能性を提供します。抽象状態は子状態を持つことができますが、それ自体をアクティブにしたり、遷移したりすることはできません。抽象状態は、その子状態の1つがアクティブになると暗黙的にアクティブになります。これは、次の場合に役立ちます：使用するために解決された依存関係を（解決によって）提供する必要がある、子状態が満たす独自のuiビューを持つテンプレートを挿入する必要があるすべての子状態URLにURLを付加する必要がある子状態ごとに、子状態またはイベントで使用するために継承されたカスタム状態データを提供する必要があります。抽象状態は、trueに設定された状態構成オブジェクトの抽象キーを指定して定義されます。

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})
0
Abdulqadir_WDDN