零件和模板的复杂嵌套

我的问题涉及到如何在AngularJS应用程序中处理模板的复杂嵌套（也称为partials）。

描述我的情况的最好方法是使用创建的图像：

AngularJS页面图

如您所见，这有可能成为具有许多嵌套模型的相当复杂的应用程序。

该应用程序是单页的，因此它将加载index.html，该索引包含DOM中具有ng-view属性的div元素。

对于第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圈的区域加载

如何构建一个AngularJS应用程序以处理模板的这种复杂嵌套，同时又将它们彼此分开呢？