2013年6月4日火曜日

テンプレートによるページ切り替え

AngularJS では Ajax を使ってページの切り替えができます。
URL のフラグメント以下のパターンによって表示する内容を変えることができます。

http://example.com/#/page1  ->  ページ１を表示
http://example.com/#/page2  ->  ページ２を表示
それ以外  ->  ページ１を表示

という感じです。
実際には外部の HTML ファイルを Ajax で取得して、ページ内へ挿入しています。


index.html の作成

まず index.html を作成します。
テンプレートの HTML を表示したいタグに、ng-view を設定します。

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ページ切り替えテスト</title>
 </head>
 <body ng-app>
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="page.js"></script>
 </body>
</html>

ngView - AngularJS
http://docs.angularjs.org/api/ng.directive:ngView


テンプレート用 HTML の作成

index.html 内の ng-view 内に挿入される HTML ファイルを作成します。
URL フラグメントを指定してリンクを張ることで別のページヘジャンプすることができます。

page1.html
<h1>ページ１</h1>
<a href="#/page2">ページ２へ移動する</a>

page2.html
<h1>ページ２</h1>
<a href="#/page1">ページ１へ移動する</a>


モジュールを作成

JavaScript でページ切り替えの設定をします。
設定はページの初期化時に行います。
AngularJS では初期設定をするために angular.module を使います。

module - AngularJS
http://docs.angularjs.org/guide/module

まず、任意の名前でモジュールを作成します。
今回は page という名前にします。
第二引数を省略しなかった場合、新たなモジュールが作られます。

page.js
angular.module('page', []);

作成したモジュールを ng-app と関連付けます。
<body> タグの ng-app を ng-app="page" に変えます。
これで page モジュールを使って初期化が行われるようになります。

index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ページングテスト</title>
 </head>
 <body ng-app="page">
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  <script src="page.js"></script>
 </body>
</html>


$routeProvider の設定

URLフラグメントによるページ切り替えは $routeProvider によって行います。

$routeProvider - AngularJS
http://docs.angularjs.org/api/ng.$routeProvider

モジュール内で $routeProvider の初期設定をすることを通知します。
設定はモジュールの config() メソッドで行います。

page.js
angular.module('page', []).config(['$routeProvider', function($routeProvider) {
    // ここに設定処理を書く
}]);


URL パターンと、表示する HTML ファイルを設定します。

page.js
angular.module('page', []).config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/page1', {templateUrl: 'page1.html'});
    $routeProvider.when('/page2', {templateUrl: 'page2.html'});
    $routeProvider.otherwise({redirectTo: '/page1'});
}]);


これでページの切り替えができるようになります。
指定したパターンが URL フラグメントの後ろに現れた場合、
該当するテンプレート HTML が ng-view の中に表示されます。



ソースコードはこちらからダウンロード出来ます（ファイル->ダウンロード）
https://docs.google.com/file/d/0B0qhX3iM3_v0LWtqM2o4clBmOEE/edit?usp=sharing


0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)