Databases
StackOverflow2013
Postsdbo
POComplex nesting of partials and templates
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POComplex nesting of partials and templates
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload