ใช้ทดสอบกับ
Supported platforms
- Android
- iOS
- browser
สร้างโปรเจ็กส์ชื่อ corsApp แบบ blank
[code]
> ionic start corsApp blank
[/code]
Install the Cordova and Ionic Native plugins:
[code]
$ ionic cordova plugin add cordova-plugin-advanced-http
$ npm install –save @ionic-native/http
[/code]
แก้ไขไฟล์
- src/app/app.module.ts
- src/pages/home/home.html
- src/pages/home/home.ts
1. src/app/app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { HTTP } from '@ionic-native/http'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, HTTP, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule { } |
2. src/pages/home/home.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <p>{{text}}</p> <button ion-button (click)="doGet()">1. Click Get </button> <button ion-button (click)="doPostHeader()">2. Click Post (Header)</button> <button ion-button (click)="doPostPlaceholder()">3. Click Post (Placeholder)</button> <button ion-button (click)="doPostPerson()">4. Click Post (Person)</button> </ion-content> |
3. src/pages/home/home.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { HTTP } from '@ionic-native/http'; import { AlertController } from 'ionic-angular'; import { RequestOptions, Headers } from '@angular/http'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { text: string; constructor(public navCtrl: NavController, private http: HTTP, public alertCtrl: AlertController) { } doGet() { let url = 'http://localhost:52579/api/Values'; console.log(url); this.http.get(url, {}, {}) .then(data => { this.text = "then"; console.log("then"); console.log("status > " + data.status); console.log("data > " + data.data); // data received by server console.log("headers> " + data.headers); }) .catch(error => { this.text = "catch"; console.log("catch"); console.log("status > " + error.status); console.log("data > " + error.error); // error message as string console.log("headers> " + error.headers); }); } doPostHeader() { var headers = new Headers(); headers.append('Access-Control-Allow-Origin', '*'); headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT'); headers.append('Accept', 'application/json'); //headers.append('content-type','application/json'); let options = new RequestOptions({ headers: headers }); this.http.setDataSerializer('json'); this.http.post('http://localhost:52579/api/Values', { "LocationID": 2, "Flag": "O", "UserFingerID": "66", "lat": 10.00, "lon": 103.00 }, {}) .then(data => { this.text = "then"; console.log("then"); console.log("status > " + data.status); console.log("data > " + data.data); // data received by server console.log("headers> " + data.headers); }) .catch(error => { this.text = "catch"; console.log("catch"); console.log("status > " + error.status); console.log("data > " + error.error); // error message as string console.log("headers> " + error.headers); let alert = this.alertCtrl.create({ title: 'Cannot connect to server!', message: 'Please check the server settings.', buttons: ['Ok'] }); alert.present() }); } doPostPlaceholder() { this.http.setDataSerializer('json'); this.http.post('https://jsonplaceholder.typicode.com/posts', { "userId": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }, {}) .then(data => { this.text = "then"; console.log("then"); console.log("status > " + data.status); console.log("data > " + data.data); // data received by server console.log("headers> " + data.headers); }) .catch(error => { this.text = "catch"; console.log("catch"); console.log("status > " + error.status); console.log("data > " + error.error); // error message as string console.log("headers> " + error.headers); let alert = this.alertCtrl.create({ title: 'Cannot connect to server!', message: 'Please check the server settings.', buttons: ['Ok'] }); alert.present() }); } doPostPerson() { this.http.setDataSerializer('json'); this.http.post('http://localhost:52579/api/Values', { "ID": 5, "FirstName": "Phaisarn", "LastName": "Sutheebanjard" }, {}) .then(data => { this.text = "then"; console.log("then"); console.log("status > " + data.status); console.log("data > " + data.data); // data received by server console.log("headers> " + data.headers); }) .catch(error => { this.text = "catch"; console.log("catch"); console.log("status > " + error.status); console.log("data > " + error.error); // error message as string console.log("headers> " + error.headers); let alert = this.alertCtrl.create({ title: 'Cannot connect to server!', message: 'Please check the server settings.', buttons: ['Ok'] }); alert.present() }); } } |
บรรทัดที่ 21: doGet()
ทดสอบ GET
บรรทัดที่ 42: doPostHeader()
ทดสอบ POST แบบกำหนด Header ใช้ได้บนมือถือ Android แต่รันด้วย cordova run browser ไม่ได้ (ขึ้นอยู่กับ Project ของทาง WebApi ด้วย)
บรรทัดที่ 82: doPostPlaceholder()
ทดสอบกับเว็บข้างนอก
บรรทัดที่ 113: doPostPerson()
ใช้งานได้ปกติ
รันด้วยแพลตฟอร์ม browser
[code]
> ionic cordova platform rm browser
> ionic cordova platform add browser
> ionic cordova run browser
[/code]
Link