angular.module.ng.$compileProvider.directive.ngView

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.

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

Example

  <script type="text/ng-template" id="examples/book.html">
    controller: {{name}}<br />
    Book Id: {{params.bookId}}<br />
  </script>

  <script type="text/ng-template" id="examples/chapter.html">
    controller: {{name}}<br />
    Book Id: {{params.bookId}}<br />
    Chapter Id: {{params.chapterId}}
  </script>

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

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

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

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

    function ChapterCntl($scope, $routeParams) {
      $scope.name = "ChapterCntl";
      $scope.params = $routeParams;
    }
  </script>

  <div ng-controller="MainCntl">
    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 ng-view></div>
    <hr />

    <pre>$location.path() = {{$location.path()}}</pre>
    <pre>$route.current.template = {{$route.current.template}}</pre>
    <pre>$route.current.params = {{$route.current.params}}</pre>
    <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
    <pre>$routeParams = {{$routeParams}}</pre>
  </div>
  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/);
  });