javascript - div - Anidación compleja de parciales y plantillas.

title css

Question

Mi pregunta involucra cómo tratar con el anidado complejo de plantillas (también llamadas parciales ) en una aplicación AngularJS.

La mejor manera de describir mi situación es con una imagen que creé:

Como puede ver, esto tiene el potencial de ser una aplicación bastante compleja con muchos modelos anidados.

La aplicación es de una sola página, por lo que carga un index.html que contiene un elemento div en el DOM con el atributo ng-view .

Para el círculo 1 , ve que hay una navegación principal que carga las plantillas apropiadas en la ng-view . Estoy haciendo esto pasando $routeParams al módulo principal de la aplicación. Aquí hay un ejemplo de lo que está en mi aplicación:

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'' })       

    }]);

En el círculo 2 , la plantilla que se carga en la ng-view tiene una navegación secundaria adicional. Este subnavegador entonces necesita cargar plantillas en el área debajo de él, pero como ya se está usando ng-view, no estoy seguro de cómo hacerlo.

Sé que puedo incluir plantillas adicionales dentro de la primera plantilla, pero estas plantillas serán bastante complejas. Me gustaría mantener todas las plantillas separadas para facilitar la actualización de la aplicación y no tener que depender de la plantilla principal para poder acceder a sus secundarios.

En el círculo 3 , puedes ver que las cosas se complican aún más. Existe la posibilidad de que las plantillas de sub-navegación tengan una segunda sub-navegación que necesite cargar sus propias plantillas también en el área del círculo 4

¿Cómo se puede estructurar una aplicación de AngularJS para lidiar con el agrupamiento de plantillas tan complejas y mantenerlas separadas una de la otra?

Answer 1

ACTUALIZACIÓN: github.com/angular-ui/ui-router

Para las subsecciones es tan fácil como aprovechar las cadenas en 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>

O puede crear un objeto en caso de que tenga enlaces a subpáginas en todo el lugar:

$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>

O incluso puedes usar $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>

También puede colocar un controlador ng en el nivel más alto de cada parcial

Answer 2

Bueno, ya que actualmente solo puede tener una directiva ngView ... Yo uso controles de directivas anidadas. Esto le permite configurar plantillas y heredar (o aislar) ámbitos entre ellos. Fuera de eso, uso ng-switch o incluso solo ng-show para elegir qué controles mostraré según lo que venga de $ routeParams.

EDITAR Aquí hay un ejemplo de pseudocódigo para darle una idea de lo que estoy hablando. Con una sub navegación anidada.

Aquí está la página principal de la aplicación

<!-- 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>

Directiva para la navegación secundaria.

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

plantilla para la navegación secundaria

<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>

Plantilla para una página principal (desde el navegador principal)

<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>

Controlador para una página principal. (de la navegación primaria)

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

Directiva para una subzona

app.directive(''mySubArea1'', function(){
    return {
        restrict: ''E'',
        templateUrl: ''mySubArea1.html'',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});

Answer 3

El ui-router angular soporta vistas anidadas. No lo he usado todavía, pero se ve muy prometedor.

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

Answer 4

Puede usar ng-include para evitar el uso de ng-views anidadas.

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

Mi página de índice que uso ng-view. Luego en mis subpáginas que necesito tener marcos anidados. Yo uso ng-include. La demo muestra un menú desplegable. Reemplacé la mía con un enlace ng-click. En la función pondría $ scope.template = $ scope.templates [0]; o $ scope.template = $ scope.templates [1];

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

Answer 5

También puede retirar esta biblioteca para el mismo propósito:

http://angular-route-segment.com

Se parece a lo que estás buscando, y es mucho más sencillo de usar que ui-router. Desde el sitio de demostración :

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 de nivel superior:

<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 anidado:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>

Answer 6

Yo también estaba luchando con vistas anidadas en Angular.

Una vez que conseguí un control de github.com/angular-ui/ui-router , supe que nunca volvería a utilizar la función de enrutamiento angular por defecto.

Aquí hay una aplicación de ejemplo que usa múltiples niveles de vistas de anidamiento

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'',
    });
});

Como se puede ver, hay 4 vistas principales (view1, view2, view3, view4) y view1 tiene 3 vistas secundarias.