506

私の質問は、AngularJS アプリケーションでテンプレートの複雑なネスト (パーシャルとも呼ばれます) を処理する方法に関するものです。

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

AngularJS ページ図

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

このアプリケーションは単一ページであるため、DOM に属性を持つ div 要素を含むindex.htmlをロードします。ng-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 アプリを構造化して、このような複雑なテンプレートのネストに対処しながら、テンプレートをすべて互いに分離するにはどうすればよいでしょうか?

4

6 に答える 6

199

更新: 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 を配置することもできます

于 2012-10-15T21:03:21.647 に答える
172

さて、あなたは現在1つのngViewディレクティブしか持つことができないので...私はネストされたディレクティブコントロールを使用します。これにより、テンプレートを設定し、それらの間でスコープを継承（または分離）することができます。それ以外では、ng-switchまたは単にng-showを使用して、$routeParamsからの着信に基づいて表示するコントロールを選択します。

編集これは、私が話していることのアイデアを与えるためのいくつかの擬似コードの例です。ネストされたサブナビゲーション付き。

これがメインアプリページです

<!-- primary nav -->
<a href="#/page/1">Page 1</a>
<a href="#/page/2">Page 2</a>
<a href="#/page/3">Page 3</a>

<!-- display the view -->
<div ng-view>
</div>

サブナビゲーションのディレクティブ

app.directive('mySubNav', function(){
    return {
        restrict: 'E',
        scope: {
           current: '=current'
        },
        templateUrl: 'mySubNav.html',
        controller: function($scope) {
        }
    };
});

サブナビゲーションのテンプレート

<a href="#/page/1/sub/1">Sub Item 1</a>
<a href="#/page/1/sub/2">Sub Item 2</a>
<a href="#/page/1/sub/3">Sub Item 3</a>

メインページのテンプレート（プライマリナビゲーションから）

<my-sub-nav current="sub"></my-sub-nav>

<ng-switch on="sub">
  <div ng-switch-when="1">
      <my-sub-area1></my-sub-area>
  </div>
  <div ng-switch-when="2">
      <my-sub-area2></my-sub-area>
  </div>
  <div ng-switch-when="3">
      <my-sub-area3></my-sub-area>
  </div>
</ng-switch>

メインページのコントローラー。（プライマリナビゲーションから）

app.controller('page1Ctrl', function($scope, $routeParams) {
     $scope.sub = $routeParams.sub;
});

サブエリアの指令

app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});
于 2012-10-12T17:21:38.933 に答える
27

同じ目的でこのライブラリをチェックアウトすることもできます:

http://angular-route-segment.com

探しているもののように見え、ui-router よりもはるかに簡単に使用できます。デモサイトから：

JS:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/:id',      's1.itemInfo.overview').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).
within().
    segment('home', {
        templateUrl: 'templates/section1/home.html'}).
    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).
    within().
        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

トップレベル HTML:

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

ネストされた HTML:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>
于 2013-08-15T10:05:47.087 に答える
17

私も Angular でネストされたビューに苦労していました。

ui-routerを手に入れたら、Angular のデフォルト ルーティング機能に戻ることはないことがわかりました。

複数レベルのビューのネストを使用するアプリケーションの例を次に示します。

app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");

$stateProvider
    .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html',
        controller: 'view1.MainController'
    })
    .state('view1.nestedViews', {
        url: '/view1',
        views: {
            'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
            'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
            'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
        }
    })

    .state('view2', {
        url: '/view2',
    })

    .state('view3', {
        url: '/view3',
    })

    .state('view4', {
        url: '/view4',
    });
});

ご覧のとおり、4 つのメイン ビュー (view1、view2、view3、view4) があり、view1 には 3 つの子ビューがあります。

于 2014-09-03T11:51:44.543 に答える
2

Angular ui-router はネストされたビューをサポートします。私はまだそれを使用していませんが、非常に有望に見えます。

http://angular-ui.github.io/ui-router/

于 2014-04-23T15:41:30.967 に答える