AngularJS multiple templates in one page

Question

I have an index that serves a static header menu, and below that an ng-view that based on route, selects the right template. Like this for example:

<navbar>
    ...
</navbar>
<div ng-view>
</div>

Everything is good so far, when a specific route is hit, a template is loaded in that container with the associated controller.

Now, I have another page that is loaded inside ng-view, and it's fired when url "/dashboard" is hit. The problem is that the dashboard page, has a sidebar menu that also needs to contain some routing logic (more or less). When a link has been clicked from the sidebar menu, I have to load only the left hand side of the page (not the whole ng-view container).

I have identified two solutions:

1) Create a directive that stores that sidebar menu, and inject it in all of the pages that are handled by the sidebar menu ==> routing is still handled by ng-view.

2) Use ng-include and have some routing logic in the dashboard page like this:

 <a ng-click="templateType = 1">Template 1</a>
 <a ng-click="templateType = 2">Template 1</a>

 <div ng-if="templateType === 1" ng-include="template1" 
  ng-controller="Template1Controller"></div>
 <div ng-if="templateType === 2" ng-include="template2" 
  ng-controller="Template2Controller"></div>

Is there another approach? Or what is the best practice in handling both a sidebar that handles some routes, and a static menu that handles another routes, with the mention that the sidebar menu is only available on some of the routes.

I have provided a paint drawing, in the hope that I can explain my problem better.

Untouched

Why don't you use angular-ui-router? – Impending

You can also check angular-route-segment out. – Batsheva

@nikhil I thought maybe there was an inbuilt solution without adding yet another external dependency – Untouched

You will have to hack at lot many places to achieve this. Though, using angular-ui-router, your life will be easy and smooth. It provides a lot of flexibility. – Impending

@nikhil angular-ui-router seems like a really good solution, but using it would require to rethink all of the complex routing that already exists inside the application. It would have been great if I would have used it since the beginning of the project. – Untouched

@UmutBenzer At a first glance, angular-route-segment seems to solve my problems and it's pretty lightweight as far as I see. I'll give it a shot and come back with the results :). Thank you all. – Untouched

I now have looked a bit deeper into both angular-ui-router and angular-route-segment. None of them fit my needs cause they both require to use their implementation of routing instead of angular inbuilt $route. This is not an option for me cause the application has about ~50 modules each with its own defined routes and it would be tremendous work to modify each and every one. I need a solution that works with ng-view. – Untouched

Answer 1

You can use UI-Router and give a shot at nested views. Here is a really good tutorial. I think what you're trying to achieve is mentioned at the end of the tutorial.

Theft

It doesn't work for me because it requires a lot of work modifying the current app in order to use their implementation of routing. – Untouched

UI-Router is not that different from ngRouter. It is handling states against routes, routeParams become stateParams and ui-view replace original ng-view directive. Then you can make reference to your routes with ui-sref (really useful) or just with href. But I understand your point of view. I think you can use ngRoute parameters to determine which sub-element to display but it may be a bit more complex. :) – Theft

UI-Router seems really nice, but the my app has ~150 different routes spread across over lots of modules and it would require modifying every single one of them in order to match UI-Router implementation. At that point I'd rather make a directive for a sidebar and I inject it everywhere I need it. – Untouched

Yes of course. You may consider using ui-router in your upcoming projects. Good luck with this one. Hope you get the answer you're searching for. – Theft

Answer 2

As all others have suggested you need to go for UI-router and nested views. It is great way to set up your page layout.

You can find the answer in Angular UI-Router How to create a "layout" state?

Nahum