2013年6月5日水曜日

ページごとに異なるコントローラを設定する

AngularJS の $routeProvider でページを切り替えた際に、
各ページごとにコントローラを設定出来ます。

when() メソッドの第二引数に渡すオブジェクトの controller にコントローラ名を渡します。

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

var Page1Controller = function($scope) {
 $scope.message = 'ここはページ1です';
}

var Page2Controller = function($scope) {
 $scope.message = 'ここはページ2です';
}

page1.html
<h1>ページ1</h1>
<p>{{message}}</p>
<a href="#/page2">ページ2へ移動する</a>

page2.html
<h1>ページ2</h1>
<p>{{message}}</p>
<a href="#/page1">ページ1へ移動する</a>

0 件のコメント:

コメントを投稿