Entonces, estoy siguiendo las guías angulares 2 en su sitio web a través de mecanografiado y estoy atascado en la integración de http api. Estoy tratando de crear una aplicación simple que pueda buscar una canción a través de la API de SoundCloud, sin embargo, tengo dificultades para implementar y comprender cómo comenzar y los recursos en línea lo hacen de muchas maneras diferentes (creo que lo hacen con los cambios rápidos de sintaxis angular 2 en mis tiempos).
Así que 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.htmlNo pasa nada especial en el ejemplo, los archivos principales serían
aplicación.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 estaba tratando de descifrar soundcloud.ts , sin embargo, no puedo y hay errores en el siguiente enfoque, es decir, @Inject no se encuentra (supongo que estoy usando una sintaxis obsoleta aquí). Esencialmente, me gustaría usar el servicio de soundcloud para las llamadas de 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; } }Soundcloud api no está incluido aquí ya que no puedo obtener los conceptos básicos primero.
Bueno, buena respuesta proporcionada por @langley, pero me gustaría agregar algunos puntos más para publicar como respuesta.
En primer lugar, para consumir las 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_PROVIDERSen el archivo de arranque porque 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 a incluir 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 RequestMethods : básicamente usamos GET, POST pero hay algunas opciones más que puedeconsultar 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á 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 obtener más información.
ver también -
la importación ha cambiado de
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';para
import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from '@angular/http';Necesitas agregar esta línea:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
en su archivo index.html.
Debe agregar HTTP_PROVIDERS :
bootstrap(App, [ ROUTER_PROVIDERS, HTTP_PROVIDERS ]);en su archivo boot.ts/bootstrap.ts e importarlos, por supuesto.
Debe importar @Inject en su archivo de clase DojoService :
import {Injectable, Inject} from 'angular2/core' Al igual que importó @Injectable .