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
