How do I manage several views in angular.js

Question

I have the following page layout:

Diagram

is the main menu
is the top menu
is the content [EDIT: Whoops it seems that I've lost some numbering, section 3 is the large middle section :)]

I would like to have separate sections to be managed (handled) by a separate modules (which seems logical), so how do I do that if I have only one ng-view that does handling of whole page view. How does one bind a module to a separate ui section?

Thank you in advance

ok, I see, but then how can I use routing, each section may have... Say 5 states, how is it possible for each controller to extract it's parameter from route? — Lu4
– Lu4, Commented May 20, 2013 at 22:20
btw, can I use controllers in conjunction with ng-view, i.e. to have a controller defined inside ng-view? — Lu4
– Lu4, Commented May 20, 2013 at 22:23
you can use controllers wherever you want. also could you please, explain what exactly you need. I don't get your first comment. — Valeh Hajiyev
– Valeh Hajiyev, Commented May 20, 2013 at 22:26
MainMenu has menu items, by selecting some menu item we change state of whole MainMenu, the same for the top menu, the content section may also have states. Is it possible to use routing and deep linking, for keeping the overal state of the application? — Lu4
– Lu4, Commented May 20, 2013 at 22:30

Gregor · Accepted Answer · 2013-05-21 07:22:49Z

7

Define your main menu and top menu as directives and only the main content as the ng-view container. A directive has a dedicated template and controller and helps to achieve code modularity.

answered May 21, 2013 at 7:22

Gregor

7564 silver badges13 bronze badges

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

Comments

Bogdan Rybak · Accepted Answer · 2013-05-21 01:40:57Z

5

This is something many people want to accomplish with standard angular router but doesn't work well without hackish attempts. That is why Angular-UI team is working on a more refined solution to the nested states problem.

Checkout the ui-router module. Make sure to read the docs carefuly and checkout the sample app as it may be a little confusing at first.

answered May 21, 2013 at 1:40

Bogdan Rybak

2,1171 gold badge19 silver badges22 bronze badges

Collectives™ on Stack Overflow

How do I manage several views in angular.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related