AngularでJsonpを使ってデータを受信する方法を説明します。
ざっくりまとめると以下のような事をします。
- HttpClientModuleをインポートする。
- HttpClient.get()メソッドでリクエストする。
以下、サンプルコードと説明です。
まずapp.module.ts でHttpClientModule をimportします。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // ↓ここ追加 import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule // ← ここ追加 ], providers: [], bootstrap: [ AppComponent ] })
ちなみにこれを追加しておかないと実行時に以下のようなエラーが出ます。
Error: StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient!
次にサービスなどからhttpリクエストしてJsonpを処理します。
次にサービスなどからhttpリクエストしてJsonpを処理します。
import { Injectable } from '@angular/core'; import { Hoge } from './hoge'; import { Observable, of } from 'rxjs'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { catchError, map, tap } from 'rxjs/operators'; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'}) }; @Injectable({ providedIn: 'root' }) export class HogeService { private hogeUrl = 'https://hoge.app/hoge'; constructor( private http: HttpClient ) { } getHoge(): Observable<Hoge[]> { // ↓ hogeUrlにGETでリクエストします。レスポンスはHoge配列として返す。(ObservableでPublishする) return this.http.get<Hoge[]>(this.hogeUrl) .pipe( catchError(this.handleError('getHoge', [])) ) } private handleError<T> (operation = 'operation', result?: T) { return (error: any): Observable<T> => { console.error(error); return of(result as T); } } }
あとはコンポーネントなどからSubscribeしてデータを取り出して使いましょう。
使い方はjsonpを使った場合と同じです。以下も参考にしてみてください。
以上です。
逆引きAngular目次
ngコマンド(Angular CLI)
Angularアプリケーションを起動する(ng serve)
Angularアプリケーションをビルドする(ng build)
Angularでファイルが変更されたら自動的にビルドする(ng build –watch)
Angularのコンポーネントを追加する(ng generate component [コンポーネント名])
Angularのサービスを追加する(ng generate service [サービス名])
テンプレート
Angularのngifでtrueとfalseの場合ごとにテンプレートを切り替える
フォーム
Angularでフォームに入力した値をリアルタイムに表示する