[ionic] open api 로 데이터 가져와서 적용하기
cordova-plugin-whitelist 추가하기
ionic plugin add cordova-plugin-whitelist
http://www.gajotres.net/ionic-2-making-rest-http-requests-like-a-pro/
INSTALL CORDOVA WHITELIST PLUGIN
If you’re using Cordova 4+ and especially if you’re accessing remote content don’t forget to install Cordova Whitelist plugin:
cordova plugin add cordova-plugin-whitelist
Open www folder and add this security meta tag to index.html file:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
소스
app.ts
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {Camera} from 'ionic-native';
import {Dataportal} from './providers/dataportal/dataportal';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
providers/dataportal/dataportal.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';
/*
Generated class for the Dataportal provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Dataportal {
data: any = null;
public serviceKey = "YOUR_SERVICE_KEY";
constructor(public http: Http) {
}
load() {
if (this.data) {
// already loaded data
return Promise.resolve(this.data);
}
// don't have the data yet
return new Promise(resolve => {
// We're using Angular Http provider to request the data,
// then on the response it'll map the JSON data to a parsed JS object.
// Next we process the data and resolve the promise with the new data.
this.http.get('path/to/data.json')
.map(res => res.json())
.subscribe(data => {
// we've got back the raw data, now generate the core schedule data
// and save the data for later reference
this.data = data;
resolve(this.data);
});
});
}
getList(page){
let url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/searchFestival?ServiceKey=" + this.serviceKey + "&numOfRows=1000&pageNo=" + page + "&MobileOS=ETC&MobileApp=TestApp&_type=json";
return this.http.get(url).map(res=>res.json());
}
}
pages/hoem/home.html
<ion-navbar *navbar>
<ion-title>
Home
</ion-title>
<ion-buttons end>
<button primary>I'm a primary coloured button in the end position of the nav bar</button>
</ion-buttons>
</ion-navbar>
<ion-content class="home">
<ion-card>
<ion-card-content>
Hello World, this is my camera app
<button (click)="takePicture()">Take a Picture</button> Latest Picture:
<img [src]="base64Image" *ngIf="base64Image" />
</ion-card-content>
</ion-card>
<ion-card>
<button (click)="getList()">get list</button>
<ion-list >
<ion-item *ngFor="#data of datas">
<h3>{{data.title}}</h3>
<p>{{data.contentid}}</p>
</ion-item>
</ion-list>
<ion-infinite-scroll (infinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-card>
</ion-content>
pages/home/home.ts
import {Page} from 'ionic-angular';
import {Camera} from 'ionic-native';
import {Http} from 'angular2/http';
import {Dataportal} from '../../providers/dataportal/dataportal';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [Dataportal]
})
export class HomePage {
public base64Image: string;
private datas = [];
private start: number = 0;
private page: number = 1;
constructor(public http: Http, public dataportal: Dataportal) {
this.http = http;
this.dataportal = dataportal;
}
takePicture() {
Camera.getPicture({
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 1000,
targetHeight: 1000
}).then((imageData) => {
// imageData is a base64 encoded string
this.base64Image = "data:image/jpeg;base64," + imageData;
}, (err) => {
console.log(err);
});
}
getList(page) {
debugger;
page = page | 1;
this.dataportal.getList(page).subscribe((data) => {
console.log(data);
for (let d of data.response.body.items.item){
this.datas.push(d);
}
}, () => console.log("getList Complete"));
}
doInfinite(infiniteScroll: any) {
console.log('doInfinite, start is currently ' + this.page);
//this.start += 50;
this.getList(this.page);
this.page += 1;
infiniteScroll.complete();
// this.loadPeople().then(() => {
// infiniteScroll.complete();
// });
}
}
'Programming > Android' 카테고리의 다른 글
[ionic] ionic 프레임워크에서 외부 URL 열기 (0) | 2016.05.24 |
---|---|
[ionic] Promise resolve 으로 변경 (0) | 2016.05.17 |
[ionic] barcode scanner (0) | 2016.05.16 |
[ionic] template 비교 (0) | 2016.05.15 |
[ionic] visual studio code 에서 ionic2 코드를 열었을 때에 experimentalDecorators 관련 에러 (0) | 2016.05.14 |
댓글