부분 및 템플릿의 복잡한 중첩

부분 및 템플릿의 복잡한 중첩

제 질문은 Angular에서 템플릿의 복잡한 중첩(부분이라고도 함)을 처리하는 방법에 관한 것입니다.JS 어플리케이션

내 상황을 설명하는 가장 좋은 방법은 내가 만든 이미지를 사용하는 것입니다.

보시다시피, 이는 중첩된 모델이 많이 있는 상당히 복잡한 응용 프로그램일 수 있습니다.

응용 프로그램은 1페이지이므로 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의 영역에 자체 템플릿을 로드해야 하는 두 번째 서브 네비게이션이 있을 가능성이 있습니다.

어떻게 Angular를 구성합니까?JS 앱은 이러한 복잡한 템플릿 중첩을 처리하면서 템플릿 모두를 서로 분리할 수 있습니까?

갱신: 각도 확인이 문제를 해결하기 위한 UI의 새 프로젝트

---

하위 섹션의 경우 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 컨트롤러를 각 부분 최상위 레벨에 배치할 수도 있습니다.

현재 ngView 디렉티브는 1개뿐이므로...중첩된 지시 컨트롤을 사용합니다.이를 통해 템플리트를 설정하고 이들 사이에서 스코프를 상속(또는 분리)할 수 있습니다.그 외에는 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.
        }
    };
});

같은 목적으로 이 라이브러리를 체크아웃할 수도 있습니다.

http://angular-route-segment.com

찾으시는 것 같고, UI 라우터보다 훨씬 사용하기 쉽습니다.데모 사이트:

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>

나도 Angular에서 중첩된 뷰에 어려움을 겪고 있었다.

일단 ui-router를 손에 넣으면 angular default routing 기능으로 돌아가지 않는다는 것을 알았습니다.

다음은 여러 수준의 보기를 중첩하는 예제 응용 프로그램입니다.

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개의 자 뷰가 있습니다.

ng-include를 사용하여 ng-view를 사용하지 않도록 할 수 있습니다.

http://docs.angularjs.org/api/ng/directive/ngInclude
http://plnkr.co/edit/ngdoc:example-example39 @filename ?p = http://plnkr.co/edit/ngdoc:example-example39

내 인덱스 페이지 나는 ng-view를 사용한다.내 서브페이지에 네스트된 프레임이 있어야 합니다.ng-include를 사용합니다.데모에 드롭다운이 표시됩니다.링크를 클릭으로 교체했습니다.함수에는 $180.dev=$180.dev[0]; 또는 $180.dev=$180.dev[1];;;

$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};

각도 UI 라우터는 중첩된 보기를 지원합니다.아직 써본 적은 없지만 아주 유망해 보여요.

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

언급URL : https://stackoverflow.com/questions/12863663/complex-nesting-of-partials-and-templates