Organizing Navigation
contentUrl:'admin/users/users-edit.tpl.html',
menuUrl:'admin/menu.tpl.html',
controller:'UsersEditCtrl',});Then, we would have to point the templateUrl property to a new partial that will
take care of including the menu and content subpartials as follows:
<div>
<div ng-include='$route.current.contentUrl'>
<!--menu goes here -->
</div>
<div ng-include='$route.current.menuUrl'>
<!--content goes here -->
</div>
</div>While the preceding workaround gets us the desired visual effect, it will result in
the menu DOM element being rerendered on each and every route change, even if
we navigate within the admin section, where such a repaint is obviously unnecessary.
This is not much of a problem if the partial is simple and doesn't need any data to
be fetched from a back-end. But as soon as we need to do expensive processing for
each partial, we need to think twice before triggering this processing with each
route change.
No nested routes support
Another limitation of the existing routing system is the lack of support for nested
routes. In practical terms, it means that we can have one and only one ng-view
directive. Put differently, we can't use the ng-view directive inside any of the partials
referenced in a route definition object. This can be problematic in larger applications
where routes naturally form a hierarchy. In the sample SCRUM application, there is
a set of such routes, which are as follows:
- /projects: It provides the list of all projects
- /projects/[project id]/sprints: It provides the list of sprints for
a given project - /projects/[project id]/sprints/[sprint id]/tasks: It provides
the list of tasks for a given sprint within a given project