My Wiki!

Table of Contents

Angular UI: Nested view

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.

Sample URL Design

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.

The Main State

White frame 

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

state main:

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

Home State

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

state main.home:

  • url /home
  • render content

Trace: • android_using_native_activity • javascript_patterns • add_resource • javaee_trouble_shooting • python_programming • javaee_enterprise_application • android_fragment • android_application_class • angular_ui_nested_view

Navigation