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

Improve this question
7
  • 1
    Why don't you use angular-ui-router? Commented Jun 11, 2015 at 11:13
  • 3
    You can also check angular-route-segment out. Commented Jun 11, 2015 at 11:19
  • @nikhil I thought maybe there was an inbuilt solution without adding yet another external dependency Commented Jun 11, 2015 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. Commented Jun 11, 2015 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. Commented Jun 11, 2015 at 11:53

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
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. :)
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.
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.
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?

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.