Views

A view provides the UI and UI behavior for a state. A state’s view is a component, which consists of both markup and logic. The view is plugged into the matching <ui-view> viewport directive.

Note: ui-view can either be an element (as we’ve seen it so far), or an attribute of some other element, such as <div ui-view></div>

Multiple named views

Up until now, we’ve defined a single view per state. Those views filled in the unnamed viewport (<ui-view>). However, UI-Router allows multiple views for a single state. This can be useful to define a layout with named sections. For instance, you may want a layout with a header, navigation and content.

+-------------------------------------------+
|               HEADER                      |
|------+------------------------------------|
|      |                                    |
|      |                                    |
| NAV  |        CONTENT                     |
|      |                                    |
|      |                                    |
+------+------------------------------------+

Named Views

To use multiple views, we give each view a name. Instead of defining a single component: property on the state, we instead create a views: object on the state definition. The object’s keys are the names of the views, and the values are the component names.

var mainState = {
  name: 'main',
  views: {
    header: 'headerComponent',
    nav: 'navComponent',
    content: 'mainComponent',
  }
}

For angular 2:

var mainState = {
  name: 'main',
  views: {
    header:{component:  HeaderComponent},
    nav: {component: NavComponent},
    content:{component:  MainComponent},
  }
}

Targeting a named ui-view

Those named views then target a ui-view with the matching name.

<ui-view name="header"></ui-view>
<ui-view name="nav"></ui-view>
<div ui-view="content"></div>

When the main state is activated:

  • Its header view fills the <ui-view name="header"></ui-view>
  • Its nav view fills the <ui-view name="nav"></ui-view>
  • Its content view fills the <div ui-view="content"></div>