Angular navigation: Show different sub navigation for different views

Question

In my app, I have a menu that is consistent across pages/view, and a sub menu that shows different links (to more nested child pages) for each main page/view. I am unsure how to approach changing the sub menu. For now, I have both the menu and sub menu in the body, as well as an ng-view element.

First I thought I'll make a controller for the sub menu and loop over an array of sub pages to display, updating the array as the main page/view changes. This seems cumbersome and unintuitive, though, as I'd have to keep a list of sub pages for each page in this separate controller, when really, they are part of the main page's/view's logic, no? Then again, I've read about the angular ui router and its implementation for nested views - should I rather approach the sub menu as a nested view?

I know SO cries to see my actual code, but I am more struggling with how to approach this problem, not with how to implement it. And it seems to me that something like a sub menu changing per page/view must be a common enough problem, that there is good recommendations for how to solve it.

Answer 1

I'm not sure I understand your scenario correctly - I'll assume a situation where there is a top-level navbar where each navbar item has a set of sub-items (a sub navbar). Also, each top-level navbar item represents a distinct functional area and consequently each has their own model. Hopefully that is close to your situation. Given that, I'd think that you could have a separate controller for each top-level navbar item (i.e., each functional area). Each of these controllers would be a child of your top-level controller, and each might have their own child controllers. Put another way, it might help you to think of your app in terms of distinct functional areas, and using the MVC pattern for each area. This might make it easier to reason about your app, and easier to write tests, as opposed to using a single controller to represent everything.

I hope that helps..

Answer 2

You could use a ngShow directive for each sub-menu, with code to decide whether it should show or not. You would probably need a different function for each sub-menu which may or may not be shown.needs to be hidden.

Answer 3

It's a good question. I think that for major flow use the route and for inner panels use widgets. create directives that compiles templates. I built a dynamic widget you can read about it in here