AngularJSチュートリアルやってメモメモ（step8 - さらにテンプレート）

目次

今回やるのはこちら↓
AngularJS: 8 - More Templating

このステップでは、前回作ったスカスカの（ユーザーが端末リストで選択した際に表示される）端末詳細ビューの実装を進める。

ワークスペースをstep8のにリセット。注：ローカルの修正は破棄される

git checkout -f step-8

ローカルサーバーをリフレッシュ（またはAngularサーバーで確認可）。
端末リストをクリックすると選択された端末の詳細な情報が表示されるはず。
端末詳細ビューを実装する為に、$httpでデータをフェッチしphone-detail.htmlビューテンプレートを新しくする。

step7からstep8への変更を説明。diffはこちら。

データ

端末一覧を表示する為のphones.jsonファイルに加えて、「app/phones/」ディレクトリはそれぞれの端末に対して一つのjsonファイルを持つ。

app/phones/nexus-s.json: (抜粋)

{
  "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
  "android": {
      "os": "Android 2.3",
      "ui": "Android"
  },
  ...
  "images": [
      "img/phones/nexus-s.0.jpg",
      "img/phones/nexus-s.1.jpg",
      "img/phones/nexus-s.2.jpg",
      "img/phones/nexus-s.3.jpg"
  ],
  "storage": {
      "flash": "16384MB",
      "ram": "512MB"
  }
}

それぞれのファイルには端末に関するのいくつかの情報（属性）を共通のデータ構造で記述する。これらのデータをこれから端末詳細ビューで表示する。

コントローラー

$httpサービスでjsonファイルをフェッチする様PhoneDetailCtrlを拡張する。以前のステップで端末リストコントローラーを作った際と同様。

app/js/controllers.js:

function PhoneDetailCtrl($scope, $routeParams, $http) {
  $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
    $scope.phone = data;
  });
}
 
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];

HTTPリクエストのURLを作成する為に$routeサービスによって現在のルートから展開された$routeParams.phoneIdを使用している。（step7参照）