Angular UI: Nested view

• http://plnkr.co/edit/HilZBmammqF3zh8tRWNj?p=preview

When the state is rendered, all ui-view are removed. For child states to inject theirs templates, there must be new ui-view in the rendered template.

Scenario: Maxo36 directory listing. There are listing in 4 domain: restaurants, services, hotels, shops. Each of the domain has unique design. The overall page (home) will provide view of all the items in the domains.

White frame

< ---------ui-view header----->
[ ------ui-view page content---
<-view sidenav--><-  content-->
------------------------------]
< ---------ui-view footer----->

state main:

• url “”
• render views: header, footer, sidenav

[-- content -------------------
[-- section top----------------
<-view result --> <-map------ >
----section top---------------]
[-- sections-------------------
<--view section--> <--widgets->
----sections------------------]
----content-------------------]

state main.home:

• url /home
• render content