前提・実現したいこと
Ajaxを用いて記述していたJavaScriptのコードを、Angualrへ書き換えたいです。
内容は、'http://localhost:8080/sampleData/data'上で、Ajax側で指定したdataIdとnumberをサーバーに渡して既存のデータベースからカラムをJSON形式で呼び出すという処理まで行い、受け取ったデータから適当な要素のみ取り出してHTML上に表示させます。
$.postでサーバーとデータのやり取りをしているのですが、"dataId=1&number=1"としている記述をどこに書けばいいかがわかりません。
'data.service.ts'というファイルの中でhttpの指定をしているので、ここに書けばいいのかなとおおよその目安を置いているのですが、どうもうまくいきません。
ご教示よろしくお願い致します。
書き換え前のコード
HTML
1<!doctype html> 2:(省略) 3 <div>${data.title}</div> 4</body> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 6<script> 7 $.post( 'http://localhost:8080/sampleData/data', 'dataId=1&number=1' ) 8 9 .done(function( data ) { 10 11 }) 12</script> 13</html>
書き換え後のコード
HTML
1■■■ @index.html ■■■ 2:(省略) 3<body> 4 <app-root>Loading...</app-root> 5 </body> 6</html> 7 8 9■■■ @app.component.html ■■■ 10:(省略) 11<my-dashboard></my-dashboard> 12 13 </div> 14 </div> 15</div> 16 17 18■■■ @dashboard.component.html ■■■ 19:(省略) 20<div> 21 <p>{{data.title}}</p> 22</div>
typescript
1■■■ @app.module.ts ■■■ 2import { BrowserModule } from '@angular/platform-browser'; 3import { NgModule } from '@angular/core'; 4import { HttpModule,JsonpModule} from '@angular/http'; 5 6import { DashboardComponent } from './component/dashboard/dashboard.component'; 7import { AppComponent } from './app.component'; 8 9import {DataService} from './services/data.service'; 10 11@NgModule({ 12 declarations: [ 13 AppComponent, 14 DashboardComponent 15 ], 16 imports: [ 17 BrowserModule, 18 HttpModule, 19 JsonpModule 20 ], 21 providers: [ 22 DataService 23 ], 24 bootstrap: [AppComponent] 25}) 26export class AppModule { } 27 28 29■■■ @app.component.ts ■■■ 30import { Component } from '@angular/core'; 31 32@Component({ 33 selector: 'app-root', 34 templateUrl: './app.component.html', 35 styleUrls: ['./app.component.css'] 36}) 37export class AppComponent { 38} 39 40 41■■■ @dashboard.component.ts ■■■ 42import {Component, OnInit} from "@angular/core"; 43import {Data} from "../../data"; 44import {DataService} from "../../services/data.service"; 45 46@Component({ 47 selector: 'my-dashboard', 48 templateUrl: './dashboard.component.html' 49}) 50 51export class DashboardComponent implements OnInit{ 52 53 constructor(private dataService: DataService){} 54 55 dataList : Data; 56 57 ngOnInit(): void { 58 this.dataService.data().subscribe( 59 result => this.setDatas(result), 60 error => alert('通信エラー' + error) 61 ); 62 } 63 64 setDatas(result): void { 65 if(result.error) { 66 alert('Web APIエラー' + result.message); 67 } 68 69 this.dataList = result.data; 70 } 71} 72 73 74■■■ @data.service.ts ■■■ 75import { Injectable } from '@angular/core'; 76import { Headers, Http, Jsonp, RequestOptionsArgs, RequestOptions, URLSearchParams} from '@angular/http'; 77import {Observable} from "rxjs/Observable"; 78import "rxjs/add/operator/map"; 79 80import { Data } from '../data'; 81 82@Injectable() 83export class DataService { 84 85 private datasUrl = 'http://localhost:8080/sampleData/data'; 86 //JSONPコールバック関数名(Angular固有値) 87 CALLBACK = 'JSONP_CALLBACK'; 88 89 private gachaId = 10186; 90 91 constructor(private http: Http, private jsonp: Jsonp) { } 92 93 data(): Observable<Data> { 94 let option : RequestOptions; 95 option = this.setHttpGetParam(this.datasUrl); 96 return this.jsonp.request(this.datasUrl, option) 97 .map((response) => { 98 let content; 99 let obj = response.json(); 100 content = { 101 error: null, 102 data: obj 103 }; 104 console.dir(content); 105 return content; 106 }); 107 } 108 private setHttpGetParam(url: string): RequestOptions { 109 let param = new URLSearchParams(); 110 param.set("callback", this.CALLBACK); 111 let options: RequestOptionsArgs = { 112 method: "get", 113 url: url, 114 search: param 115 }; 116 return new RequestOptions(options); 117 } 118} 119
補足情報(FW/ツールのバージョンなど)
macOS
Angular
JavaScript
TypeScript
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/19 07:18