Uso de api http rest con angular 2

Question

Uso de api http rest con angular 2

Por lo tanto, estoy siguiendo las guías de angular 2 en su sitio web a través de typescript y estoy atascado en la integración http api. Estoy tratando de hacer una aplicación simple que puede buscar a través de soundcloud api para una canción, sin embargo, tengo dificultades para implementar y entender cómo ponerse en marcha y los recursos en línea lo hacen de muchas maneras diferentes (creo que hacer a rapid angular 2 cambios de sintaxis en el día).

Así que por el 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

Nada de fantasía está pasando en el ejemplo, los archivos principales serían

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

Y yo estaba tratando de averiguar soundcloud.ts sin embargo no soy capaz de y hay errores en el siguiente enfoque, es decir, @Inject no se encuentra (asumo que estoy usando sintaxis obsoleta aquí). Esencialmente, me gustaría usar el servicio soundcloud para llamadas api dentro del componente de búsqueda de formularios de mi aplicación.

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

@Injectable()
export class SoundcloudService {
 http : Http

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

La api de Soundcloud no se incluye aquí ya que no puedo bajar los conceptos básicos primero.

32

javascript angular http

Author: selem mn, 2016-01-13

Source

2 answers

Necesitas agregar esta línea:

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

En su índice.archivo html.

Necesitas agregar HTTP_PROVIDERS:

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]);

En tu bota.ts / bootstrap.archivo ts, e importarlos, por supuesto.

Necesita importar @Inject en su archivo de clase DojoService:

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

Al igual que importaste @Injectable.

7

Author: Langley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-12 23:21:17

score 36 · Accepted Answer

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

En primer lugar para consumir API Rest necesitamos importar los módulos Http y HTTP_PROVIDERS. 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 como este.

bootstrap(App, [
    HTTP_PROVIDERS, some_more_dependencies
]);

Y las importaciones que deben incluirse son....

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

A veces necesitamos proporcionar Headers mientras consumimos 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 Métodos de solicitud: básicamente usamos GET, POST, pero hay algunas opciones más que puede consultar aquí...

Podemos usar los métodos de solicitud como RequestMethod.method_name

Hay algunas opciones más para las API, pero por ahora he publicado una ejemplo para POST request que le ayudará mediante el uso de 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() }]
                }
            });
    }

Puede consultar aquí también para más información.

Véase también -

Cómo tratar con códigos de estado http que no sean 200 en Angular 2.

Actualización

Se ha cambiado la importación de

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

A

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