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

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 = 'ここはページ１です';
}

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

page1.html

<h1>ページ１</h1>
<p>{{message}}</p>
<a href="#/page2">ページ２へ移動する</a>

page2.html

<h1>ページ２</h1>
<p>{{message}}</p>
<a href="#/page1">ページ１へ移動する</a>