AureliaのGet-startedを試してみる（２

[前回](http://qiita.com/kazusa-qooq/items/e3e6a4987dbf1052c0f8)に続いて次世代のJavascriptフレームワークらしいAureliaのGet-startedを試していきます。
今回はFlickrから画像をとってきて表示するページを追加するところまでです。

##Adding Navigation
* レイアウトテンプレートを追加します
* app.htmlとapp.jsのファイル名をwelcome.html、welcome.jsに変更し、最初のページとします
* レイアウトとしてapp.htmlとapp.jsを新たに作成します
* 新しいappはナビゲーション（タブによるページ切り替え）とwelcomなどのページコンテンツで構成されます

``` app.js(new)
import {Router} from 'aurelia-router';
import bootstrap from 'bootstrap';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        { route: ['','welcome'], moduleId: './welcome', nav: true, title:'Welcome' }
      ]);
    });
  }
}
```
* `import {Router} from 'aurelia-router';`によりナビゲーション用のRouterをインポートします。
* `static inject() { return [Router]; }`によりコンストラクタにruoterが渡されます
* routerをプロパティに設定する場合、`this.router = router;`のように、名前はrouterでなければなりません（将来この制限は撤廃されるらしい）
* `this.router.configure`でルータの設定をします
* `config.title = 'Aurelia';`でアプリケーションのタイトルを指定できます
* `config.map`でルーティングを設定できます
* routeプロパティは表示するview(welcome)のURLパスを設定します
* moduleIdプロパティはviewへの相対ファイルパスを指定します
* titleプロパティはviewのタイトルを設定できます
* navプロパティはナビゲーションに表示するかどうかを設定します

``` app.html(new)
<template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>
```
* `repeat.for="row of router.navigation"`によりli要素は繰り返し作成される
* ローカル変数rowは自身と子エレメントで使用可能
* `if.bind="router.isNavigating"`によりナビゲーション中（画面遷移中）はスピナーがでるようになっています。（２ページ目を作り終わったら確認できます）

この段階でこんな感じの画面になってます。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/7ee92e1c-0e33-51bf-5b4e-2fa68dda335f.png)

##Adding a Second Page
* 2ページ目を追加するためルーティングを更新します

```app.js
      config.map([
        { route: ['','welcome'],  moduleId: './welcome', nav: true, title:'Welcome' },
        { route: 'flickr', moduleId: './flickr', nav: true }
      ]);

```

* flickrを作成します

``` flickr.js
import {HttpClient} from 'aurelia-http-client';

var url = 'https://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json';

export class Flickr{
  static inject() { return [HttpClient]; }
  constructor(http){
    this.heading = 'Flickr';
    this.images = [];
    this.http = http;
  }

  activate(){
    return this.http.jsonp(url).then(response => {
      this.images = response.content.items;
    });
  }

  canDeactivate(){
    return confirm('Are you sure you want to leave?');
  }
}
```
* aurelia-http-clientを使用してajaxが簡易に実行できます。デフォルトで入っていないため、`jspm install aurelia-http-client`を実行しインストールしてください
* 画面には表示から別画面へ遷移するまでのライフサイクルが存在します
* canActivate, activate, canDeactivate, deactivateを使用しライフサイクルにフックすることができます
* フックがPromiseを返した場合、その終了まで画面遷移を遅らせることができます
* 例では画像を取得できるまで、画面が遷移しません
* cloud9上で試す場合、リクエストにhttpsを使用してください

``` flickr.html
<template>
    <section>
        <h2>${heading}</h2>
        <div class="row">
        <div class="col-sm-6 col-md-3" repeat.for="image of images">
          <a class="thumbnail">
            <img style="width: 260px; height: 180px;" src.bind="image.media.m"/>
          </a>
        </div>
        </div>
    </section>
</template>
```
* とくにいうことはありません。

成功すれば以下のような画面が表示できます。
![image](https://qiita-image-store.s3.amazonaws.com/0/71988/72c23d8e-a47d-e53c-9554-dc13f70b9c7f.png)

切りがいいので一端きります。[次回](http://qiita.com/kazusa-qooq/items/b86b96f5d478dddd7c30)