# `ngView` (directive in module `ng` )

Improve this doc

## Description

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

Additionally, you can also provide animations via the ngAnimate attribute to animate the enter and leave effects.

## Usage

This directive can be used as custom element, but we aware of IE restrictions.

as element:

    <ng-view>
    </ng-view>

as attribute

    <ANY ng-view>
       ...
    </ANY>

as class

    <ANY class="ng-view">
       ...
    </ANY>

with animations

    //The enter and leave animations are supported
    <ANY ng-view ng-animate="{enter: 'enter-animation', leave: 'leave-animation'}">
       ...
    </ANY>

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

### Directive info

- This directive creates new scope.

### Animations

- enter - happens just after the ngView contents are changed (when the new view DOM element is inserted into the DOM)
- leave - happens just after the current ngView contents change and just before the former contents are removed from the DOM

## Events

- ### $viewContentLoaded

  Emitted every time the ngView content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngView scope

## Example

#### Source

#### Demo