ui-view
ui.router.state
The ui-view directive tells $state where to place your templates.
<ui-view [name="{string}"] [autoscroll="{string}"] [onload="{string}"]> </ui-view>as attribute
<ANY ui-view [name="{string}"] [autoscroll="{string}"] [onload="{string}"]> ... </ANY>as class
<ANY class="ui-view [name: {string};] [autoscroll: {string};] [onload: {string};]"> ... </ANY>
Param | Type | Details |
---|---|---|
name (optional) | string | 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. |
autoscroll (optional) | string | It allows you to set the scroll behavior of the browser window when a view is populated. By default, $anchorScroll is overridden by ui-router's custom scroll service, ui.router.state.$uiViewScroll. This custom service let's you scroll ui-view elements into view when they are populated during a state activation. Note: To revert back to old |
onload (optional) | string | 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>
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 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/>" } } })
Examples for autoscroll
:
<!-- 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 [[ViewDeclaration.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.
Example usage of $resolve in a view template
$stateProvider.state('home', { template: '<my-component user="$resolve.user"></my-component>', resolve: { user: function(UserService) { return UserService.fetchUser(); } } });