ngView: (string | (($view: any, $animate: any, $ngViewScroll: any, $interpolate: any, $q: any) => {
    compile: ((tElement: any, tAttrs: any, $transclude: any) => ((scope: any, $element: any, attrs: any) => void));
    count: number;
    priority: number;
    restrict: string;
    terminal: boolean;
    transclude: string;
}))[] = ...

ui-view: A viewport directive which is filled in by a view from the active state.

  • name: (Optional) A view name. The name should be unique amongst the other views in the same state. You can have views of the same name that live in different states. The ui-view can be targeted in a View using the name ([[Ng1StateDeclaration.views]]).

  • autoscroll: an expression. When it evaluates to true, the ui-view will be scrolled into view when it is activated. Uses [[$ngViewScroll]] to do the scrolling.

  • onload: Expression to evaluate whenever the view updates.

A view can be unnamed or named.

<!-- Unnamed -->
<div ui-view></div>

<!-- Named -->
<div ui-view="viewName"></div>

<!-- Named (different style) -->
<ui-view name="viewName"></ui-view>

You can only have one unnamed view within any template (or root html). If you are only using a single view and it is unnamed then you can populate it like so:

<div ui-view></div>
$stateProvider.state("home", {
template: "<h1>HELLO!</h1>"
})

The above is a convenient shortcut equivalent to specifying your view explicitly with the [[Ng1StateDeclaration.views]] config property, by name, in this case an empty name:

$stateProvider.state("home", {
views: {
"": {
template: "<h1>HELLO!</h1>"
}
}
})

But typically you'll only use the views property if you name your view or have more than one view in the same template. There's not really a compelling reason to name a view if its the only one, but you could if you wanted, like so:

<div ui-view="main"></div>
$stateProvider.state("home", {
views: {
"main": {
template: "<h1>HELLO!</h1>"
}
}
})

Really though, you'll use views to set up multiple views:

<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>
$stateProvider.state("home", {
views: {
"": {
template: "<h1>HELLO!</h1>"
},
"chart": {
template: "<chart_thing/>"
},
"data": {
template: "<data_thing/>"
}
}
})
<!-- If autoscroll present with no expression,
then scroll ui-view into view -->
<ui-view autoscroll/>

<!-- If autoscroll present with valid expression,
then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>

Resolve data:

The resolved data from the state's resolve block is placed on the scope as $resolve (this can be customized using [[Ng1ViewDeclaration.resolveAs]]). This can be then accessed from the template.

Note that when controllerAs is being used, $resolve is set on the controller instance after the controller is instantiated. The $onInit() hook can be used to perform initialization code which depends on $resolve data.

$stateProvider.state('home', {
template: '<my-component user="$resolve.user"></my-component>',
resolve: {
user: function(UserService) { return UserService.fetchUser(); }
}
});