# Variable ngView

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.

### Attributes

- `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.

#### Example:

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/>"
        }
      }
    })

#### 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 [[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.

#### Example:

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

- Defined in router/directives/view-directive.js:135