title: Complex nesting of partials and templates
body: <p>My question involves how to go about dealing with complex nesting of <strong>templates</strong> (also called <strong>partials</strong>) in an AngularJS application.</p>
  
  <p>The best way to describe my situation is with an image I created:</p>
  
  <p><img src="https://i.stack.imgur.com/V17C3.png" alt="AngularJS Page Diagram"></p>
  
  <p>As you can see this has the potential to be a fairly complex application with lots of nested models.</p>
  
  <p>The application is single-page, so it loads an <strong>index.html</strong> that contains a div element in the DOM with the <code>ng-view</code> attribute.</p>
  
  <p><strong>For circle 1</strong>, You see that there is a Primary navigation that loads the appropriate templates into the <code>ng-view</code>.  I'm doing this by passing <code>$routeParams</code> to the main app module.  Here is an example of what's in my app:</p>
  
  <pre><code>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' })       
  
      }]);
  </code></pre>
  
  <p><strong>In circle 2</strong>, the template that is loaded into the <code>ng-view</code> has an additional <strong>sub-navigation</strong>.  This sub-nav then needs to load templates into the area below it - but since ng-view is already being used, I'm not sure how to go about doing this.</p>
  
  <p>I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex.  I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.</p>
  
  <p><strong>In circle 3</strong>, you can see things get even more complex.  There is the potential that the sub-navigation templates will have a <strong>2nd sub-navigation</strong> that will need to load its own templates as well into the area in <strong>circle 4</strong></p>
  
  <p><strong>How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?</strong></p>