My question involves how to go about
dealing with complex nesting of templates (also called
partials) in an AngularJS
application.
The best way to describe my
situation is with an image I
created:
src="https://i.stack.imgur.com/V17C3.png" alt="AngularJS Page
Diagram">
As you can see this has the
potential to be a fairly complex application with lots of nested
models.
The application is single-page, so it
loads an index.html that contains a div element in the DOM
with the ng-view
attribute.
For circle
1, You see that there is a Primary navigation that loads the appropriate
templates into the ng-view
. I'm doing this by passing
$routeParams
to the main app module. Here is an example of
what's in my
app:
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' })
}]);
In
circle 2, the template that is loaded into the
ng-view
has an additional
sub-navigation. 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.
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.
In circle
3, you can see things get even more complex. There is the potential that
the sub-navigation templates will have a 2nd sub-navigation
that will need to load its own templates as well into the area in circle
4
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?
No comments:
Post a Comment