ngView

http://docs.angularjs.org/api/ngRoute.directive:ngView

概要
使用方法
$viewContentLoaded
デモ

概要

ngViewは、主レイアウト(index.html)ファイルに、現在のrouteの描画されたテンプレートを含めることによって、 $routeサービスを補完するディレクティブです。現在のrouteが変更される度に、$routeサービスの設定に応じて含まれるビューが変更されます。

ngRouteモジュールがインストールされている必要があります。

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。

<!-- 要素として使用 -->
<ng-view>
</ng-view>

<!-- 属性として使用 -->
<要素 ng-view>
   ...
</要素>

<!-- クラスとして使用 -->
<要素 class="ng-view">
   ...
</要素>

ディレクティブ情報

このディレクティブは、新しいスコープを作成します。
このディレクティブは、優先度レベル400で実行します。

アニメーション

enter - アニメーションは、新しいコンテンツをブラウザに取り込んだ際に使用されます。
leave - アニメーションは、既存のコンテンツが無くなる際に使用されます。

enterとleaveアニメーションは同時に発生します。アニメーションの各ステップの詳細については、$animateを参照してください。

$viewContentLoaded

ngViewコンテンツが再読み込みされる度にトリガされます。

型: emit
ターゲット: 現在のngViewスコープ

<!doctype html>
<html ng-app="ngViewExample">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.1/angular-animate.min.js"></script>
    <script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MainCntl 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>
  </body>
</html>

<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'],
  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/);
});

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。