Anidamiento complejo de parciales y plantillas

ACTUALIZAR: Echa un vistazo al nuevo proyecto de AngularUI para abordar este problema

Para subsecciones es tan fácil como aprovechar 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 poner un controlador ng en el nivel más alto de cada parcial

Usted puede comprar esta biblioteca para el mismo propósito también:

Http://angular-route-segment.com

Se parece a lo que está buscando, y es mucho más simple 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>

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

Una vez que obtuve un control de ui-router Supe que nunca volvería a la funcionalidad de enrutamiento predeterminado de angular.

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

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.

Puede usar ng-include para evitar usar 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 uso ng-view. Luego en mis subpáginas que necesito tener marcos anidados. Yo uso ng-include. La demostración muestra un menú desplegable. Reemplacé el mío con un link ng-click. En la función yo pondría scope alcance.template =scope scope.plantillas [0]; o scope scope.plantilla = $alcance.plantillas [1];

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

Angular ui-router soporta vistas anidadas. Aún no lo he usado, pero parece muy prometedor.

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