Step-7

AngularJS

マルチビューを持つアプリケーションの作り方。

マルチビューとルーティングとレイアウトテンプレート

これまでは1つのビューしかなかったので全てのテンプレートを index.html に記述していた。
マルチビューにするにはまず index.html をレイアウトテンプレートと呼ぼれるものに変える。
そして、カレントルートに従って、部分テンプレート（→これが各ビューのテンプレート）がレイアウトテンプレートの中に入るようにする。

App モジュール

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

アプリケーション用のモジュールを作る。
ここでは 'phonecatApp' と名付ける。
第2引数ではアプリケーションが依存しているモジュールのリストを与える。ここでは 'ngRoute' と 'phoneControllers' 。

$routeProvider.when API

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);
  • URL のハッシュフラグメントが '/phones' の場合、phone list ビューが表示される。このビューを作るために phone-list.html テンプレートと PhoneListCtrl コントローラを使う。
  • URL のハッシュフラグメントが '/phones/:phoneId' の場合、phone detail ビューが表示される。このビューを作るために phone-detail.html テンプレートと PhoneDetailCtrl コントローラを使う。

新しく作ったモジュールを使ってアプリケーションを起動するため、ngApp ディレクティブにモジュール名（'phonecatApp'）を指定しておく。

<!doctype html>
<html lang="en" ng-app="phonecatApp">
...

Controllers

phonecatControllers モジュールを作る。
小さいアプリケーションでは2~3個のコントローラであれば1つのモジュールにまとめてしまう。

var phonecatControllers = angular.module('phonecatControllers', []);
 
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });
 
    $scope.orderProp = 'age';
  }]);
 
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
  }]);

Template

$route サービスは ngView ディレクティブと一緒に使われる。
ngView ディレクティブの役割は、カレントルートに合わせてレイアウトテンプレートにビューテンプレートを読み込ませること。