Improve this doc View Source

# Overview

`ngView` is a directive that complements the $route service by including the rendered template of the current route into the main layout (`index.html`) file. Every time the current route changes, the included view changes with it according to the configuration of the `$route` service.

Requires the `ngRoute` module to be installed.

## Directive Info

- This directive creates new scope.
- This directive executes at priority level 400.

## Usage

- as element: (This directive can be used as custom element, but be aware of IE restrictions).

      <ng-view
        [onload=""]
        [autoscroll=""]>
      ...
      </ng-view>

- as attribute:

      <ANY
        [onload=""]
        [autoscroll=""]>
      ...
      </ANY>

- as CSS class:

      <ANY class="[onload: ;] [autoscroll: ;]"> ... </ANY>

## Animations

enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.

The enter and leave animation occur concurrently.

Click here to learn more about the steps involved in the animation.

### Arguments

Param | Type | Details
--- | --- | ---
onload (optional) | string | Expression to evaluate whenever the view updates.
autoscroll (optional) | string | Whether `ngView` should call $anchorScroll to scroll the viewport after the view is updated.
                 - If the attribute is not set, disable scrolling.
                 - If the attribute is set without value, enable scrolling.
                 - Otherwise enable scrolling only if the `autoscroll` attribute value evaluated
                   as an expression yields a truthy value.

## Events

- ### $viewContentLoaded

  Emitted every time the ngView content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngView scope

## Example

Edit in Plunker

    <div ng-controller="MainCtrl as main">
      Choose:
      <a href="Book/Moby">Moby</a> |
      <a href="Book/Moby/ch/1">Moby: Ch1</a> |
      <a href="Book/Gatsby">Gatsby</a> |
      <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
      <a href="Book/Scarlet">Scarlet Letter</a><br/>

      <div class="view-animate-container">
        <div ng-view class="view-animate"></div>
      </div>
      <hr />

      <pre>$location.path() = {{main.$location.path()}}</pre>
      <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
      <pre>$route.current.params = {{main.$route.current.params}}</pre>
      <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre>
      <pre>$routeParams = {{main.$routeParams}}</pre>
    </div>

    <div>
      controller: {{book.name}}<br />
      Book Id: {{book.params.bookId}}<br />
    </div>

    <div>
      controller: {{chapter.name}}<br />
      Book Id: {{chapter.params.bookId}}<br />
      Chapter Id: {{chapter.params.chapterId}}
    </div>

    .view-animate-container {
      position:relative;
      height:100px!important;
      position:relative;
      background:white;
      border:1px solid black;
      height:40px;
      overflow:hidden;
    }

    .view-animate {
      padding:10px;
    }

    .view-animate.ng-enter, .view-animate.ng-leave {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

      display:block;
      width:100%;
      border-left:1px solid black;

      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      padding:10px;
    }

    .view-animate.ng-enter {
      left:100%;
    }
    .view-animate.ng-enter.ng-enter-active {
      left:0;
    }
    .view-animate.ng-leave.ng-leave-active {
      left:-100%;
    }

    angular.module('ngViewExample', ['ngRoute', 'ngAnimate'])
      .config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
          $routeProvider
            .when('/Book/:bookId', {
              templateUrl: 'book.html',
              controller: 'BookCtrl',
              controllerAs: 'book'
            })
            .when('/Book/:bookId/ch/:chapterId', {
              templateUrl: 'chapter.html',
              controller: 'ChapterCtrl',
              controllerAs: 'chapter'
            });

          // configure html5 to get links working on jsfiddle
          $locationProvider.html5Mode(true);
      }])
      .controller('MainCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
          this.$route = $route;
          this.$location = $location;
          this.$routeParams = $routeParams;
      }])
      .controller('BookCtrl', ['$routeParams', function($routeParams) {
        this.name = "BookCtrl";
        this.params = $routeParams;
      }])
      .controller('ChapterCtrl', ['$routeParams', function($routeParams) {
        this.name = "ChapterCtrl";
        this.params = $routeParams;
      }]);

    it('should load and compile correct template', function() {
      element(by.linkText('Moby: Ch1')).click();
      var content = element(by.css('[ng-view]')).getText();
      expect(content).toMatch(/controller\: ChapterCtrl/);
      expect(content).toMatch(/Book Id\: Moby/);
      expect(content).toMatch(/Chapter Id\: 1/);

      element(by.partialLinkText('Scarlet')).click();

      content = element(by.css('[ng-view]')).getText();
      expect(content).toMatch(/controller\: BookCtrl/);
      expect(content).toMatch(/Book Id\: Scarlet/);
    });