Enviando llamados tipo POST

Curso de Angular 4

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Enviando llamados tipo POST

Alejandro Valenzuela

Estudiante

Buenas, dejo mi código donde implemente mediante httpCliente:

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Http } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http'; 

// para usar firebase
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class LugaresService {
  id = null;
  // para trabajar httpcliente utilizaremos ese url
  API_ENDPOINT="https://platzisquere-215116.firebaseio.com";

  constructor(
    private router: ActivatedRoute, 
    private afDB: AngularFireDatabase, 
    private http : Http, 
    private httpCliente: HttpClient) { 
      this.id = this.router.snapshot.params['id'];
  }

  public obtenerLugares(){
    return  this.afDB.list('lugares/');
  }
  public guardarLugar(lugar){
    // aca estamos trabajando con Sockets.
    // this.afDB.database.ref('lugares/'+lugar.id).set(lugar);

    // aca usaremos httpClient
    const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
    this.httpCliente.post(this.API_ENDPOINT+'/lugares.json',lugar,{headers:headers}).subscribe() ;
  }
  public editarLugar(lugar){
    // alamceno en firebase con un id genereado con date.now y los datos (lugar)
    this.afDB.database.ref('lugares/'+lugar.id).set(lugar);
  }
  public obtenerGeoData(direccion){
    return this.http.get('http://maps.google.com/maps/api/geocode/json?address='+direccion);
  }
  public obtenerLugar(id){
    return this.afDB.object('lugares/'+id);
  }
}

algo muy importante tambien tiene que agregar en app.module.ts

import { HttpClientModule } from '@angular/common/http';  
..
imports: [ 
 	  ...
    HttpClientModule
]

espero aportar algo a la comunidad…
Saludos

Antonio Torres Garcia

Sergio Geovani Ruíz Reyes

Geordano Polanco Rodríguez

Christian Gonzalez

Eduardo Alejandro Yrady Brazon

Diego Forero

Team Platzi

Víctor Hugo Rivas Sánchez

Noelia Iglesias Martínez

Camilo Tabares

Bryan Condor

Mauro Gomez

Carlos Flores

F.Javier Pedrosa Ruiz

Sebastian Chavez

Mx Cst

Raul Castillo

Usuario anónimo

User

Isaí Ramírez

Eduardo Rahn

Otmaira Buitrago

Dilan Santiago Ariza Cañon

Kevin Garzon

kevin david pantoja vergara

Sergio Alexander Florez Galeano

Nithel Rene Elias Alvarez

Fran Delgado

Daniel Altamar

Enviando llamados tipo POST

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor