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

[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 3 ページ作成の続きです。

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

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

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

$ jspm install aurelia-http-client

JSONP

flickrにアクセス

request

http://api.flickr.com/services/feeds/photos_public.gne?tags=rainier&tagmode=any&format=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": "[e-mail] (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

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 にアクセス

続きます。

続き: [Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 5 Custom Element