☰

部分とテンプレートの複雑なネスト 質問する

tag-icon • tag-icon javascript angularjs
部分とテンプレートの複雑なネスト 質問する

私の質問は、AngularJS アプリケーションでテンプレート(部分テンプレートとも呼ばれます)の複雑なネストをどのように処理するかということです。

私の状況を説明する最良の方法は、私が作成した画像を使用することです。

AngularJS ページダイアグラム

ご覧のとおり、これは多数のネストされたモデルを持つかなり複雑なアプリケーションになる可能性があります。

アプリケーションは単一ページなので、属性を持つ DOM 内の div 要素を含むindex.htmlng-viewを読み込みます。

円 1 には、適切なテンプレートを に読み込むプライマリ ナビゲーションがありますng-view。メイン アプリ モジュールに渡すことでこれを行っています$routeParams。私のアプリの内容の例を次に示します。

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

円 2 では、に読み込まれるテンプレートにng-view追加のサブナビゲーションがあります。このサブナビゲーションは、その下の領域にテンプレートを読み込む必要がありますが、ng-view がすでに使用されているため、これをどのように実行すればよいかわかりません。

最初のテンプレート内に追加のテンプレートを含めることができることはわかっていますが、これらのテンプレートはすべてかなり複雑になります。アプリケーションの更新を容易にし、子にアクセスするために親テンプレートをロードする必要がないようにするために、すべてのテンプレートを別々に保持したいと思います。

円3では、状況がさらに複雑になっていることがわかります。サブナビゲーションテンプレートには、円4の領域に独自のテンプレートを読み込む必要がある2番目のサブナビゲーションが含まれる可能性があります。

テンプレートの複雑なネストを処理しながら、それらをすべて互いに分離したままにする AngularJS アプリの構造化はどのようにすればよいのでしょうか?

ベストアンサー1

アップデート： この問題に対処するためのAngularUIの新しいプロジェクトをチェックしてください

サブセクションの場合は、ng-include で文字列を活用するのと同じくらい簡単です。

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

または、サブページへのリンクがあちこちにある場合は、オブジェクトを作成することもできます。

$scope.pages = { page1: 'section1/subpage1.htm', ... };

<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

あるいは、$routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;

<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

各部分ノードの最上位にng-controllerを配置することもできます。

おすすめ記事