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

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

as element (see IE restrictions)

    <ng-view>
    </ng-view>

as attribute

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

as class

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

### Directive info

- This directive creates new scope.

## Events

- ### $viewContentLoaded

  Emitted every time the ngView content is reloaded.

  #### Type:

  emit

  #### Target:

  the current ngView scope

## Example

Choose: Moby | Moby: Ch1 | Gatsby | Gatsby: Ch4 | Scarlet Letter

    <div
      ng-view
      class="example-animate-container"
      ng-animate="{enter: 'example-enter', leave: 'example-leave'}">

    $location.path() = {{main.$location.path()}}
    $route.current.templateUrl = {{main.$route.current.templateUrl}}
    $route.current.params = {{main.$route.current.params}}
    $route.current.scope.name = {{main.$route.current.scope.name}}
    $routeParams = {{main.$routeParams}}

controller: {{book.name}}
Book Id: {{book.params.bookId}}

controller: {{chapter.name}}
Book Id: {{chapter.params.bookId}}
Chapter Id: {{chapter.params.chapterId}}

.example-leave-setup, .example-enter-setup { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -o-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; }

.example-animate-container { position:relative; height:100px; }

.example-animate-container > * { display:block; width:100%; border-left:1px solid black;

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

}

.example-enter-setup { left:100%; } .example-enter-setup.example-enter-start { left:0; }

.example-leave-setup { } .example-leave-setup.example-leave-start { left:-100%; }

angular.module('ngView', [], function($routeProvider, $locationProvider) { $routeProvider.when('/Book/:bookId', { templateUrl: 'book.html', controller: BookCntl, controllerAs: 'book' }); $routeProvider.when('/Book/:bookId/ch/:chapterId', { templateUrl: 'chapter.html', controller: ChapterCntl, controllerAs: 'chapter' });

    // configure html5 to get links working on jsfiddle
    $locationProvider.html5Mode(true);

});

function MainCntl($route, $routeParams, $location) { this.$route = $route; this.$location = $location; this.$routeParams = $routeParams; }

function BookCntl($routeParams) { this.name = "BookCntl"; this.params = $routeParams; }

function ChapterCntl($routeParams) { this.name = "ChapterCntl"; this.params = $routeParams; }

it('should load and compile correct template', function() { element('a:contains("Moby: Ch1")').click(); var content = element('.doc-example-live [ng-view]').text(); expect(content).toMatch(/controller\: ChapterCntl/); expect(content).toMatch(/Book Id\: Moby/); expect(content).toMatch(/Chapter Id\: 1/);

    element('a:contains("Scarlet")').click();
    content = element('.doc-example-live [ng-view]').text();
    expect(content).toMatch(/controller\: BookCntl/);
    expect(content).toMatch(/Book Id\: Scarlet/);

});