[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 4 httpクライアントを使ってflickr APIを叩く
14454 ワード
[Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 3 ページ作成の続きです。
flow to make page
- Add the route configuration to the app.js router.
- Add a view-model.
- Add a view with the same name (but with an .html extension).
- 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
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": "[email protected] (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
Author And Source
この問題について([Aurelia] 未来志向JavaScriptフレームワーク Aurelia 入門 4 httpクライアントを使ってflickr APIを叩く), 我々は、より多くの情報をここで見つけました https://qiita.com/colorrabbit/items/94638588b4eb512026e8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .