En Angular 2, siempre importamos el servicio HTTP desde el módulo @angular/http. El siguiente comando hará esto:
importar { HTTP_PROVIDERS } de $0027@angular/http$0027;
Ahora podemos inyectar Http en nuestro componente.
Traduzcamos esto en nuestro código. En el archivo app.components.ts, añade el siguiente código después de la primera importación:
importar { Http, Respuesta } de $0027@angular/http$0027;
Entonces, define dos variables:
12link ="http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=";http:Http;
ts
Entonces, agregue el constructor así:
123constructor(http:Http){this.http= http;}ts
Finalmente, agregue esto a la función performSearch:
12345var apiLink =this.link+ searchTerm.value;this.http.request(apiLink).subscribe((res:Response)=>{console.log(res.json());});ts
Sólo como referencia, para ponerlo todo en un listado, el contenido del archivo app.component.ts debería ser:
1234567891011121314151617181920212223242526importar{Componente}de"@angular/núcleo";importar{Http,Respuesta}de"@angular/http";@Componente({ moduleId:módulo. id, selector: "app-root", templateUrl: "app.component.html", styleUrls:["app.component.css"]})exportclassAppComponent{ title ="Welcome to GiphySearch"; link ="http://api. giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q="; http:Http;constructor(http:Http){this.http= http;}performSearch(searchTerm:HTMLInputElement):void{var apiLink =this. link+ searchTerm.value;this.http.request(apiLink).subscribe((res:Response)= >{console.log(res.json());});}}ts
Si ejecutas esto ahora, obtendrás un error de «no hay proveedor» para Http! Hice que esto funcionara añadiendo la siguiente línea de importación al archivo main.ts (en la carpeta de la aplicación):
1import{HTTP_PROVIDERS}de"@angular/http";ts
Al final del mismo archivo, agregue bootstrap(AppComponent, [HTTP_PROVIDERS]);.
El contenido del archivo app.ts debería ser:
12345678910import{ bootstrap }de"@angular/plataforma-browser-dynamic";import{ enableProdMode }de"@angular/núcleo";import{HTTP_PROVIDERS}de"@angular/http";import{AppComponent, environment }de". /app/";if(environment.production){enableProdMode();}bootstrap(AppComponent,[HTTP_PROVIDERS]);ts
Cuando ejecutes la aplicación, introduce un valor en el cuadro de búsqueda y haz clic en el botón de búsqueda, verás algo así en el registro de tu consola:
Puedes ver que estamos recuperando el objeto resultante. En su propiedad de datos, hay 25 objetos que contienen información sobre las imágenes que queremos mostrar en nuestra aplicación. Pero, ¿cómo mostramos estas imágenes en nuestra aplicación?
Vemos que la llamada al API devuelve 25 imágenes. Guardemos esto en alguna variable para usarla más tarde:
gitanos = [];
Guardemos los resultados de la llamada a la API para esta variable también:
this.giphies = res.json().data;
Ahora, el contenido del archivo app.component.ts debería ser:
12345678910111213141516171819202122232425262728importar{Componente}de"@angular/núcleo";importar{Http,Respuesta}de"@angular/http";@Componente({ moduleId:módulo. id, selector: "app-root", templateUrl: "app.component.html", styleUrls:["app.component.css"]})exportclassAppComponent{ title ="Welcome to GiphySearch"; link ="http://api. giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q="; http:Http; giphies =[];constructor(http:Http){this.http= http;}performSearch(searchTerm:HTMLInputElement):void{var apiLink =this. link+ searchTerm.value;this.http.request(apiLink).subscribe((res:Response)={{this.giphies= res.json().data;console.log(this.giphies);});}}ts
Esto está funcionando ahora, pero no queremos estar desconectando nuestros objetos a la consola. Queremos mostrarlos en nuestra aplicación. Para mostrar la imagen, necesitamos posicionarnos en las imágenes de los objetos, luego en las originales, y finalmente en la propiedad url.
No queremos mostrar sólo una imagen sino todas las imágenes. Usaremos la versión de Angular 2 del ng-for de Angular 1. Ahora se ve así:
Como referencia, aquí está el listado completo de app.component.html:
12345678910111213<h1; {{{{title}}</h1};<inputname="search "#searchTerm images.original.url}}"html
En este punto, si echamos un vistazo a la aplicación y buscamos por ejemplo «gatos divertidos» obtendremos esto:
Aunque el resultado no parezca elegante, nuestro código hace exactamente lo que se supone que debe hacer. Si quieres que se vea mejor, siéntete libre de añadir más CSS en el archivo app.components.css.