How do I setup nested views in AngularJS?

uiview angularjs nested
Golo Roden picture Golo Roden · Mar 17, 2013 · Viewed 44.6k times · Source

I have an application with various screens. Each screen is assigned a URL, such as #, mails, contacts, and so on.

In my main HTML file I have an ng-view element which updates according to the route the user selects. So far, so good.

Now some of these screens have a sub-navigation. E.g., #mails does have an inbox and a sent folder. They present themselfes with two columns: The sub-navigation on the left, the mails of the appropriate folder on the right.

When you navigate to #mails, it shall redirect you to #mails/inbox, so that basically inbox is the default sub-view for mails.

How could I set this up?

The only approach I can currently think of (I am quite new to AngularJS, hence forgive me if this question is a little bit naive) is to have two views, one for #mails/inbox, and the other for #mails/sent.

When you select a route, these views are loaded. When you select #mails it simply redirects you to #mails/inbox.

But this means that both views must use an ng-include for the sub-navigation. Somehow this feels wrong to me.

What I'd like more is to have nested views: The top one switches between screens such as mails, contacts, and so on, and the bottom one changes between sub-views such as inbox, sent, and so on.

How would I solve this?

Answer

Golo Roden picture Golo Roden · Mar 19, 2013

AngularJS ui-router solved my issues :-)

Related questions

How to add constraints programmatically using Swift

I'm trying to figure this out since last week without going any step further. Ok, so I need to apply some constraints programmatically in Swift to a UIView using this code: var new_view:UIView! = UIView(frame: CGRectMake(0, 0, 100, 100)); new_view.…

Read More
How to add a touch event to a UIView?

How do I add a touch event to a UIView? I try: UIView *headerView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, nextY)] autorelease]; [headerView addTarget:self action:@selector(myEvent:) forControlEvents:UIControlEventTouchDown]; // ERROR MESSAGE: UIView may not respond to '-addTarget:…

Read More
Giving UIView rounded corners

My login view has a subview which has a UIActivityView and a UILabel saying "Signing In…". This subview has corners which aren't rounded. How can I make them round? Is there any way to do it inside my xib?

Read More