javascript - descargar - http headers angular 4

Uso de apis de descanso http con angular 2

Question

Por lo tanto, estoy siguiendo angular 2 guías en su sitio web a través de texto mecanografiado y estoy atrapado en http api integración. Intento hacer una aplicación simple que pueda buscar a través de la API de Soundcloud para una canción, sin embargo tengo dificultades para implementar y entender cómo ponerme en marcha y los recursos en línea lo hacen de muchas maneras diferentes (creo que los rápidos cambios de sintaxis angular 2) en mis tiempos).

Entonces, en este momento mi proyecto se ve así

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

No hay nada lujoso sucediendo en el ejemplo, los archivos principales serían

aplicaciones

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
]);

Y yo estaba tratando de averiguar soundcloud.ts sin embargo no puedo y hay errores en el siguiente enfoque, es decir, @Inject no se encuentra (supongo que estoy usando sintaxis obsoleta aquí). Básicamente, me gustaría utilizar el servicio SoundCloud para llamadas de API dentro de mi componente de búsqueda de formularios de aplicaciones.

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

@Injectable()
export class SoundcloudService {
 http : Http

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

Soundcloud API no está incluido aquí ya que no puedo obtener los conceptos básicos primero.

Answer 1

Bien, la respuesta fue proporcionada por @langley, pero me gustaría agregar algunos puntos más para publicar como respuesta.

En primer lugar, para consumir Rest API, necesitamos los módulos Http y HTTP_PROVIDERS para ser importados. Como estamos hablando de Http, el primer paso es obviamente.

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

Pero sí, es una buena práctica proporcionar HTTP_PROVIDERS en el archivo bootstrap porque al usarlo de esta manera se proporciona a nivel global y está disponible para todo el proyecto de esta manera.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

y las importaciones que se incluirán son ....

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

A veces necesitamos proporcionar Headers mientras access_token las API para enviar access_token y muchas más cosas que se hacen de esta manera:

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

Ahora a RequestMethods : bascialmente utilizamos GET, POST, pero hay algunas opciones más que puede consultar aquí ...

Podemos usar métodos de solicitud como RequestMethod.method_name

Hay algunas opciones más para las API, pero por ahora he publicado un ejemplo para la solicitud POST, que lo ayudará con algunos métodos importantes:

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() }]
                }
            });
    }

usted puede referirse aquí también para más información.

ver también -

• Cómo lidiar con códigos de estado http distintos de 200 en Angular 2.

Actualizar

importación ha sido cambiada de

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

a

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

Answer 2

Necesita agregar esta línea:

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

en su archivo index.html

Necesita agregar HTTP_PROVIDERS :

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

en su archivo boot.ts / bootstrap.ts, e impórtelos por supuesto.

Necesita importar @Inject en su archivo de clase DojoService :

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

Al igual que importó @Injectable .