Hoy aprenderemos a utilizar el cliente HTTP y ver como hacer peticiones AJAX en Angular 2. Vamos directos a la práctica.
Modificamos el fichero app.module.ts para añadir el módulo HTTP y cargarlo en la aplicación de forma global.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // Importamos el módulo http del paquete http de Angular import { HttpModule, JsonpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { routing, appRoutingProviders } from './app.routing'; import { PaisesComponent } from './components/paises.component'; // Se lo pasamos a imports para que lo cargue en la aplicación @NgModule({ imports: [ BrowserModule, FormsModule, routing, HttpModule ], declarations: [ AppComponent, PaisesComponent ], providers: [ appRoutingProviders ], bootstrap: [ AppComponent ] }) export class AppModule { }
Ahora vamos a crear un servicio para tener dentro métodos que interactuen con un api o que hagan peticiones ajax.
// importamos el modulo Injectable de AngularJS import { Injectable } from '@angular/core'; // Importamos los componentes que vamos a usar import {Http, Response, Headers} from "@angular/http"; import "rxjs/add/operator/map"; import {Observable} from "rxjs/Observable"; // Permitimos que este objeto se pueda inyectar con la DI @Injectable() export class PaisesService { constructor(private _http: Http){} getPosts(){ // petición por get a esa url de un api rest de pruebas return this._http.get("https://jsonplaceholder.typicode.com/posts") .map(res => res.json()); } }
Ahora definimos nuestro componente.
import { Component } from '@angular/core'; // Importamos la clase del servicio import {PaisesService} from '../services/paises.service'; @Component({ selector: 'paises', template: ` <h2>Paises</h2> <ul> <li>España</li> <li>Mexico</li> <li>Colombia</li> </ul> `, providers:[PaisesService] }) export class PaisesComponent { public posts; // cargamos el servicio constructor(private _paisesService: PaisesService){ // Llamamos al método del servicio this._paisesService.getPosts() .subscribe( result => { this.posts = result; console.log(this.posts); }, error => { this.errorMessage = <any>error; if(this.errorMessage !== null){ console.log(this.errorMessage); alert("Error en la petición"); } } ); } }
Este método nos mostrará un console log con todos los objetos que nos devuelve el servicio, que ya podríamos recorrer y mostrar en nuestra plantilla.
Esto es todo, ya sabemos usar de forma básica los servicios, el cliente http y como hacer peticiones AJAX con Angular 2. Te recomiendo mi curso de Angular 2 donde profundizamos en todo esto y hacemos una aplicación SPA basada en un API REST.
29 septiembre, 2016
Muy buenos dias, una consulta si quisiera hacerlo interactur con base de datos mysql es decir hacer un crud , como lo tendria que hacer para que funcione por ejemplo si quisiera hacer un sistema de matricula en php usando codeigniter y angular2 se podria hacer?me podrias dar algunos tips?
29 septiembre, 2016
Deberias crear un API REST y hacer lo que hacemos en este mismo tutorial. Enseño a crear aplicaciones completas en el curso de Angular 2 en Español y en el curso de desarrollo web full-stack.
Saludos 😀