6

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.

enter image description here

Rus Paul
  • 1,348
  • 2
  • 14
  • 23
  • 1
    Why don't you use angular-ui-router? – Nikhil Aggarwal Jun 11 '15 at 11:13
  • 3
    You can also check [angular-route-segment](http://angular-route-segment.com/) out. – Umut Benzer Jun 11 '15 at 11:19
  • @nikhil I thought maybe there was an inbuilt solution without adding yet another external dependency – Rus Paul Jun 11 '15 at 11:20
  • 2
    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. – Nikhil Aggarwal Jun 11 '15 at 11:23
  • 2
    @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. – Rus Paul Jun 11 '15 at 11:53
  • @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. – Rus Paul Jun 11 '15 at 11:54
  • 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. – Rus Paul Jun 11 '15 at 12:29

2 Answers2

8

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.

Freezystem
  • 4,494
  • 1
  • 32
  • 35
  • 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. – Rus Paul Jun 11 '15 at 12:31
  • 1
    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. :) – Freezystem Jun 11 '15 at 12:43
  • 1
    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. – Rus Paul Jun 11 '15 at 12:49
  • 1
    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. – Freezystem Jun 11 '15 at 13:03
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?

Community
  • 1
  • 1
Hacker
  • 7,798
  • 19
  • 84
  • 154