Pertanyaan Menggunakan http sisa apis dengan sudut 2


Jadi, saya mengikuti panduan 2 sudut di situs web mereka melalui naskah dan saya terjebak di integrasi api http. Saya mencoba membuat aplikasi sederhana yang dapat mencari via soundcloud api untuk sebuah lagu, namun saya mengalami kesulitan dalam mengimplementasikan dan memahami bagaimana cara pergi dan sumber daya online melakukannya dengan berbagai cara (saya percaya lakukan perubahan sintaksis sudut 2 yang cepat). kembali pada hari).

Jadi saat ini proyek saya terlihat seperti ini

app
  components
    home
      home.component.ts
      ...
    search
      search.component.ts
      ...
    app.ts
    ...
  services
    soundcloud.ts
  bootstrap.ts
index.html

Tidak ada yang mewah dalam contoh, file utama akan

app.ts

import {Component, View} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {HomeComponent} from './home/home.component';
import {SearchComponent} from './search/search.component';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html',
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
  {path: '/search', name: 'Search', component: SearchComponent}
])

export class App { }

bootstrap.ts

    import {App}     from './components/app';
import {bootstrap}        from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(App, [
  ROUTER_PROVIDERS
]);

Dan saya mencoba untuk mencari tahu soundcloud.ts namun saya tidak dapat dan ada kesalahan dalam pendekatan berikut yaitu @Inject tidak ditemukan (saya asumsikan saya menggunakan sintaks usang di sini). Pada dasarnya saya ingin menggunakan layanan SoundCloud untuk panggilan api dalam komponen pencarian form aplikasi saya.

import {Injectable} from 'angular2/core'
import {Http} from 'angular2/http'

@Injectable()
export class SoundcloudService {
 http : Http

 constructor(@Inject(Http) http) {
   this.http = http;
 }
}

api soundcloud tidak termasuk di sini karena saya tidak bisa mendapatkan dasar-dasar terlebih dahulu.


32
2018-01-12 22:55


asal


Jawaban:


Jawaban bagus yang diberikan oleh @langley tetapi saya ingin menambahkan beberapa poin lagi sehingga posting sebagai jawaban.

Pertama-tama untuk mengkonsumsi API Istirahat kita membutuhkan Http dan HTTP_PROVIDERS modul untuk diimpor. Seperti yang kita bicarakan tentang Http, langkah pertama adalah jelas.

<script src="node_modules/angular2/bundles/http.dev.js"></script>

Tapi ya itu adalah praktik yang baik untuk diberikan HTTP_PROVIDERS di file bootstrap karena dengan menggunakan cara ini disediakan di tingkat global dan tersedia untuk seluruh proyek seperti ini.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

dan impor yang akan dimasukkan adalah ....

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

Terkadang kita perlu menyediakan Headers sambil mengonsumsi API untuk dikirim access_token dan banyak lagi hal yang dilakukan dengan cara ini:

this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

Sekarang ke RequestMethods: pada dasarnya kami menggunakan GET, POST tetapi ada beberapa opsi lagi yang bisa Anda lihat di sini ...

Kita dapat menggunakan metode permintaan sebagai RequestMethod.method_name 

Ada beberapa opsi lain untuk API tetapi untuk saat ini saya telah mengirim satu contoh untuk permintaan POST yang akan membantu Anda dengan menggunakan beberapa metode penting:

PostRequest(url,data) {
        this.headers = new Headers();
        this.headers.append("Content-Type", 'application/json');
        this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'))

        this.requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: url,
            headers: this.headers,
            body: JSON.stringify(data)
        })

        return this.http.request(new Request(this.requestoptions))
            .map((res: Response) => {
                if (res) {
                    return [{ status: res.status, json: res.json() }]
                }
            });
    }

kamu bisa lihat di sini juga untuk info lebih lanjut.

Lihat juga -

Memperbarui

impor telah diubah dari

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

untuk

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';

36
2018-01-13 04:52



Anda perlu menambahkan baris ini:

<script src="node_modules/angular2/bundles/http.dev.js"></script> 

di file index.html Anda.

Anda perlu menambahkan HTTP_PROVIDERS:

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

di file boot.ts / bootstrap.ts Anda, dan impor mereka tentu saja.

Anda perlu mengimpor @Inject di dalam kamu DojoService file kelas:

import {Injectable, Inject} from 'angular2/core'

Sama seperti yang Anda impor @Injectable.


7
2018-01-12 23:21