web-dev-qa-db-ja.com

Angular ui-router：ui-views vs directives？

angular ui-router では、複数のネストされたビューが許可されます。これらの交換可能なビューの役割は、ディレクティブの役割と重複するようです。

（複数、ネストされた）ui-viewsvs angle'sディレクティブを使用することの賛否両論？

更新

状態とルーティングは2つの異なる機能です。状態を使用すると、partial.htmlテンプレートとそのコントローラーを交換できます。また、対応するURL /ルートを （オプション？） で指定できます。

Tim Kindbergからのメール応答（ui-router dev）：

ui-viewはディレクティブであるため、使用する場合は、他のui-routerモジュールとうまく機能するように特に機能しているディレクティブを使用しています。この機能を置き換えるために独自のディレクティブを展開するのが簡単だとは想像できません。

これには、2つのオプションがあります。

通常のディレクティブ：

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */})

vsui-view "Directives"

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

ボーナス質問：

通常angularディレクティブ機能 はビューで使用できますか？

  • トランスクルード
  • 交換
  • スコープの分離
  • 関数のコンパイル/リンク

Ui-viewsがディレクティブである場合、使用法が異なることは明らかです。これらのモデルを調和させることは意味がありませんか？

angularjsangular-uiangular-ui-router
59
Michael Lewis

Angularディレクティブを指すUIルーターのインラインビューを使用した場合はどうでしょうか。

ユーザーアカウントのCRUD操作を処理するテーブルのディレクティブがあるとします。ディレクティブの名前はuser-admin。ルートファイルは次のようになります。

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

これはあなたに多くの素晴らしいものを与えるでしょう：

  • ディレクティブを直接指すURLを持つことができます
  • 状態が単なるディレクティブである場合、2つのテンプレート（ビューテンプレートとディレクティブテンプレート）を必要とする重複を削除します。
  • Angular 2.0の準備中のディレクティブに、より多くのコントローラーロジックを移動し始めることができます。 here および here を参照してください。
37
Aaron Gray

いくつかの思考/通信の後、ここに私の結論があります：

i-viewsはコンテナを定義し、stateはそれらのコンテナに何が入るかを定義します

要素に_ui-view='containerName'_ディレクティブを配置すると、何かを保持するコンテナーを設定します。あなたはそこに何が入るかについてまだ何も言っていません。

$stateProvider.state(...)定義を作成するとき、これらのコンテナに何を入れるかを指定しています。

_$stateProvider.state('someState', {
  views: {
    "containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})
_

UIビューですべての従来のディレクティブ機能（トランスクルード、置換、スコープの分離、コンパイル/リンク関数）を使用できますか？よく分かりません。例えば：

_$stateProvider.state('someState', {
  views: {
    "containerName": { 
              templateUrl: "someContents.html",
              scope: { localVar: "@" },  // can you
              transclude: true,          // do this?
              controller: function(){}
    },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})
_

結論として、各オプションにはトレードオフがあるようです。ディレクティブにはいくつかの追加機能がありますが、UIビューは互換性があり、ルートを関連付けることができます。

7
Michael Lewis

比較的免責でこのようなことができるようです：

    $stateProvider.state('general', {
        url: '/general',
        views: {
            main: {
                template: '<general-directive></general-directive>'
            }
        }
    });
5
btk
**In Config function:**
.state('list', {
            url:'/list',
            template:'<user-info-table></user-info-table>',
            controller:'UserInfoTableController',
        });

**In Directive:**
angular.module('UserInfo').directive("userInfoTable", function() {
    return {
       templateUrl:'templates/UserInfoTable.html',
       restrict:'EA',
    };
});
0
Suraj