AngularJS - 1つのテンプレートで複数のビューを表示

126

AngularJSを使用して動的なWebアプリケーションを構築しています。 1つのテンプレートに複数のng-viewを含めることは可能ですか？AngularJS - 1つのテンプレートで複数のビューを表示

2013-07-09 Jayram Singh

まだいくつかのバグで、プルリクエストがあるように思わ：https://github.com/angular/angular.js/pull/1198 – Alp

月Varwigは角度のディレクティブの役割について書いています。それはあなたの質問に対する答えではありませんが、彼のアイデアは良い選択かもしれません：http：//jan.varwig。org/archive/angularjs-views-vs-directives/comment-page-1 –

は角度チュートリアルを通過していましたが、まったく同じ質問をしましたが、これは非常に明確ではありませんが、かなり深いコンセプトのようです。 – qwwqwwq

ng-viewを1つだけ持つことができます。

コンテンツを変更するには、ng-include、ng-switch、またはrouteProviderを使用して異なるコントローラとテンプレートをマッピングする方法があります。

出典

2013-07-09 09:28:19 pasine

マッピングコントローラとテンプレートはng-view要素全体を置き換えるでしょうか？ – zx1986

ウィジェットのコンテンツを動的に変更するのはどうですか？あなたはウィジェットのためのビューとそのウィジェットのためのコントローラとそのウィジェットのためのモデルを作成したくないですか？ –

ビューを使用することをお勧めしますか？ 'ng-show'と' ng-hide'でdivを定義し、変数を使って可視性をコントロールする方が良いのでしょうか？なぜなら時々私は複数のコンポーネントを隠す/表示することがあるからです – SomethingSomething

通常のng-viewモジュールを使用すると、複数のダイナミックテンプレートを持つことはできません。

ただし、this projectはそうすることができます（ui-routerをご覧ください）。

出典

2013-07-09 10:17:54

angular-uiは（近い）将来の良い選択のように思えますが、まだ生産用として非常に不安定です –

UI-ルータは助けることができるプロジェクトです。それのhttps://github.com/angular-ui/ui-router 一つが特長です複数の名前付きビューで

UI-ルータは、多くの機能を持っており、あなたが取り組んでいる場合、私はそれを使用してことをお勧めします高度なアプリ。

複数の名前付きビューhereのドキュメントを確認してください。

出典

2013-09-04 13:25:55

残念なことにui-routerのreadmeによると：注：UI-Router現在開発中です。そのため、このライブラリは十分にテストされていますが、APIが変更される可能性があります。変更ログに続いてそれに応じて使用法を変更するのが快適である場合にのみ、本番アプリケーションでの使用を検討してください。 – trainoasis

@trainoasisこれは複数のプロジェクトで使用され、非常に安定していると思われますが、今まではAPIを変更することについて問題はありませんでした。 –

私はあなたがただ一つのことを達成することができると信じていますng-view。メインテンプレートでは、サブビューのためにng-includeセクションを持つことができます。メインコントローラでは、各サブテンプレートのモデルプロパティを定義します。自動的にng-includeセクションにバインドされます。これは、あなたが、それは内容を変更し、ドロップダウンリストからテンプレートを変更した場合の例でng-includedocumentation

で与えられた例を確認することができます

複数ng-viewを持つと同じです。ここでは、1つのメインng-viewがあり、ドロップダウンを選択して手動でサブコンテンツを選択するのではなく、メインビューが読み込まれたときと同じように行います。

出典

2014-10-21 05:53:38 Tekz

あなたが説明したように、UI-Routerのような解決策がない場合、ng-includeは実用的な代替手段です。 ng-includeが達成できないのは、URL（state）駆動のマルチビューであり、$ routeは現在のURLに基づいて異なるビューを動的にレンダリングできません。私たちはAngularの腕をねじり、 'ng-include' [documentation]（https://docs.angularjs.org/api/ng/directive/ngInclude）の例のように、コントローラ内のカスタムロジックを使用することで、それは望ましいアプリケーションアーキテクチャのパターンではなく、UI-Routerは正しいタイプのソリューションです。 – Yiling

コメントに@Yilingをプラスします。 ng-includeを使用するのが回避策です。 –

複数のビューまたはネストされたビューを持つことは可能です。しかし、ng-viewではありません。

角度のプライマリルーティングモジュールは複数のビューをサポートしていません。しかし、あなたはui-routerを使うことができます。これはサードパーティのモジュールで、Github、angular-ui/ui-router、https://github.com/angular-ui/ui-router経由で入手できます。現在、新しいバージョンのngRouter（ngNewRouter）も開発中です。現時点では安定していません。簡単なスタートアップの例をui-routerで提供します。ビューを使用して、ビューの名前を付け、レンダリングに使用するテンプレートとコントローラを指定できます。 $ stateProviderを使用すると、ビューのプレースホルダを特定の状態にレンダリングする方法を指定する必要があります。

<body ng-app="main"> 
    <script type="text/javascript"> 
    angular.module('main', ['ui.router']) 
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) { 
     $stateProvider 
     .state('home', { 
      url: '/', 
      views: { 
       'header': { 
        templateUrl: '/app/header.html' 
       }, 
       'content': { 
        templateUrl: '/app/content.html' 
       } 
      } 
     }); 
    }]); 
    </script> 
    <a ui-sref="home">home</a> 
    <div ui-view="header">header</div> 
    <div ui-view="content">content</div> 
    <div ui-view="bottom">footer</div> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"> 
</body>

このサンプルでは、angularjsとangular-ui.routerを参照する必要があります。

$ bower install angular-ui-router

出典

2015-10-09 12:19:52

ありがとうございますこれは素晴らしいです！これは、角度ui/ui-routerのGithubリポジトリhttps://github.com/angular-ui/ui-routerにあります。モジュールを入手しました。 – totallytotallyamazing

なぜそうする必要があるのか分かりません。ヘッダー/フッターを挿入して内容を確認するのはなぜでしょうか？ – user441521

AngularJS - 1つのテンプレートで複数のビューを表示

答えて

関連する問題