ReactViewDeclaration | @uirouter/react
Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ReactViewDeclaration

Declares a view on some state

Hierarchy

Index

Properties

Optional $context

$context: ViewContext

The context that this view is declared within.

Optional $name

$name: string

The raw name for the view declaration, i.e., the StateDeclaration.views property name.

Optional $type

$type: string

A type identifier for the View

This is used when loading prerequisites for the view, before it enters the DOM. Different types of views may load differently (e.g., templateProvider+controllerProvider vs component class)

Optional $uiViewContextAnchor

$uiViewContextAnchor: string

The normalized context anchor (state name) for the uiViewName

When targeting a ui-view, the uiViewName address is anchored to a context name (state name).

Optional $uiViewName

$uiViewName: string

The normalized address for the ui-view which this ViewConfig targets.

A ViewConfig targets a ui-view in the DOM (relative to the uiViewContextAnchor) which has a specific name.

example

header or $default

The uiViewName can also target a nested view by providing a dot-notation address

example

foo.bar or foo.$default.bar

Optional component

component: StatelessComponent<any> | ComponentClass<any> | ClassicComponentClass<any>

The React Component to use for this view.

A property of ReactStateDeclaration or ReactViewDeclaration:

The React Component which will be used for this view.

Resolve data can be provided to the component using props.

TODO: document react shorthand, like ng1's shorthand: inside a "views:" block, a bare string "foo" is shorthand for { component: "foo" }

Example:

.state('profile', {
  // Use the <my-profile></my-profile> component for the Unnamed view
  component: MyProfileComponent,
}

.state('messages', {
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <message-list></message-list> component for the view named 'content'
  views: {
    header: { component: NavBar },
    content: { component: MessageList }
  }
}

.state('contacts', {
  // Inside a "views:" block, supplying only a Component class is shorthand for { component: NavBar }
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <contact-list></contact-list> component for the view named 'content'
  views: {
    header: NavBar,
    content: ContactList
  }
}

Generated using TypeDoc