[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 4 httpクライアントを使ってflickr APIを叩く

[[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 3 ページ作成](http://qiita.com/tsumekoara/items/200f609ac1b459482d62)の続きです。

# flow to make page

1. Add the route configuration to the app.js router.
2. Add a view-model.
3. Add a view with the same name (but with an .html extension).
4. Confirm

# use Flickr API

## Routing

```js:src/app.js
import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';

export class App {
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
      { route: ['','welcome'], name: 'welcome',  moduleId: './welcome',      nav: true, title:'Welcome' },
      { route: 'flickr',       name: 'flickr',   moduleId: './flickr',       nav: true }
    ]);

    this.router = router;
  }
}
```

## view-model

### HttpClient

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

@inject(HttpClient)
export class Flickr{
  heading = 'Flickr';
  images = [];
  url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json';

  constructor(http){
    this.http = http;
  }

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

  canDeactivate(){
    return confirm('Are you sure you want to leave?');
  }
}
```

### Command

```rb
$ jspm install aurelia-http-client
```

### JSONP

flickrにアクセス

```js:request
http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=json'
```

```json:response
jsonFlickrFeed(
  {
		"title": "Recent Uploads tagged rainier",
		"link": "http://www.flickr.com/photos/tags/rainier/",
		"description": "",
		"modified": "2015-06-19T03:18:11Z",
		"generator": "http://www.flickr.com/",
		"items": [
	   {
			"title": "11th-st-Bridge-Rainier",
			"link": "http://www.flickr.com/photos/robsnet/18754581860/",
			"media": {"m":"http://farm1.staticflickr.com/491/18754581860_f3ea9ed13f_m.jpg"},
			"date_taken": "2015-06-17T21:10:37-08:00",
			"description": " <p><a href=\"http://www.flickr.com/people/robsnet/\">Rob Green - SmokingPit.com<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/robsnet/18754581860/\" title=\"11th-st-Bridge-Rainier\"><img src=\"http://farm1.staticflickr.com/491/18754581860_f3ea9ed13f_m.jpg\" width=\"240\" height=\"160\" alt=\"11th-st-Bridge-Rainier\" /><\/a><\/p> <p>MT Rainier framed by the 11th ST bridge spanning the Thea Foss water way in Tacoma, WA.<\/p>",
			"published": "2015-06-19T03:18:11Z",
			"author": "nobody@flickr.com (Rob Green - SmokingPit.com)",
			"author_id": "99605956@N00",
			"tags": "park street city bridge 2 mountain snow water st canon way town washington thea downtown mt mark tide salt scenic down center 11 flats ii covered rainier cascades sound 7d wa tacoma firemen draw 11th shipping foss range cascade span puget waterway robgreen firemens"
	   },
　・
　・
　・
  ]
}
```

## view

```html:src/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>
```

## Confirm

http://localhost:9000/#/flickr にアクセス

![Screen Shot 2015-06-19 at 13.20.30.png](https://qiita-image-store.s3.amazonaws.com/0/18705/f3cbebd5-441c-2cad-7ce8-665d36149446.png)


![Screen Shot 2015-06-19 at 13.36.53.png](https://qiita-image-store.s3.amazonaws.com/0/18705/6a763f93-2aa6-e44f-0edf-117307598670.png)


続きます。


続き: [[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 5 Custom Element](http://qiita.com/tsumekoara/items/8966d32000abb7192a66)