Guardando Records en Firebase

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:20

Guardando Records en Firebase

Curso de Angular 4

Clase 35 de 80

Clase 35 / 80

javier alejandro segovia

Hace 9 años

Hola chico he visto mucho comentario que tenia muchos problema y sin solucion.
Bueno Empezemos
Primero en la carpeta Crear, Creamos una archivo que se llamara crear.module.ts
en que consiste este archivo, bueno es muy simple.Para crear un formulario se necesita un modelo con determinado atriburo ej: nombre,apellido,mail,password,etc.
Haci que empezemos ha crear el modelo en la carpeta Crear
Asi crear/crear.module.ts

// Modelo 
export class Crear {
     constructor(
         public nombre : string,
         public distancia : number,
         public cercania : number,
         public description : string,
         public plan : string
     ){}
}

Una vez que tenes un modelo.

Ahora que modificar crear.component.ts aca le dejo la modificacion copien

<div class="alert alert-secondary" role="alert">
  <a routerLink="/">Lugares</a> / Crear Lugar
</div>

<h1>Crear</h1>
<hr>

<!-- Contacto Formulario -->
<div class="container">
<form [formGroup]="formulario" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Nombre</label>
    <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="Nombre"  formControlName="nombre"
    id="nombre">
  </div>
  <div class="form-group">
    <label>Distancia</label>
    <input type="text" class="form-control"  placeholder="Distancia"  formControlName="distancia"
    id="distancia">
  </div>
  <div class="form-group">
    <label>Cercania</label>
    <input type="text" class="form-control"  placeholder="Cercania"  formControlName="cercania"
    id="cercania">
  </div>
  <div class="form-group">
    <label>Descripcion</label>
    <textarea class="form-control"  formControlName="description"
    id="description"></textarea>
  </div>
  <hr>
  <label>Plan</label>
  <input type="text" class="form-control"  formControlName="plan"
  id="plan">
  <hr>
  <button type="submit" class="btn btn-primary">Enviar</button>
  <button type="button" class="btn btn-secondary" routerLink="/">Cancelar</button>
</form>
</div>

Segundo paso modificamos el crear.component.ts aca le dejo copien.

import { Component, OnInit } from '@angular/core';
import { Crear } from './crear.module';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { lugaresComponent } from '../lugares/lugares.component';
import { AngularFireDatabase } from 'angularfire2/database/database';


@Component({
   selector: 'crear-root',
   templateUrl: './crear.component.html'
})

export class CrearComponent implements OnInit {
    constructor(private db:AngularFireDatabase){}
    formulario : FormGroup;
    ngOnInit(){
       this.formulario = new FormGroup({
          nombre: new FormControl(null, Validators.required),
          distancia: new FormControl(null, Validators.required),
          cercania: new FormControl(null, Validators.required),
          description: new FormControl(null, Validators.required),
          plan: new FormControl(null, Validators.required)
       })
    }

    onSubmit(){
        if (this.formulario.valid){
            const { nombre, distancia, cercania, description, plan } = this.formulario.value;
            const lugar = new Crear(nombre, distancia, cercania, description, plan);
             console.log(lugar)
             this.db.database.ref('lugares/1').set(lugar);
        }

    }
       

}

Y por ultimo hay que agregar en app.module.ts
agrear ReactiveFormsModule
quedaria asi
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

imports:[
FormsModule,
ReactiveFormsModule
]

y Listo.

Comente si le funciono!!

javier alejandro segovia

Hace 9 años

Hola en la parte modelo tenes que separa como le dejo aqui.
export classCrear {
constructor(
public nombre : string,
public distancia : number,
public cercania : number,
public description : string,
public plan : string
)
}

Irvin Ulises Luna Balderas

Hace 8 años

hola que tal soy nuevo y tengo una duda con esto === [formGroup] de donde lo mandas ha llamar y cual es su función especifica..

Comentarios (59)59 comentarios

Nelson Celis

Company_admin

Ivan Cardozo

Santiago Diaz

Esteban José Pagano

Luis Rocha

Andrés Felipe Chaparro Grimaldo

Marifer Villarroel

Luis Rodolfo Lara Espinoza

Matias Cabido

Nicolas Schimpf

Mariano Villarreal

Eduardo de la Cruz Ibarra

Profesor

Jhon Alexander Vega Martínez

Carlos capacho

Orlando Jesús Pereira Fernández

Roger Abarca

Jesus David Mendez Coronell

Rodolfo Sáenz

Byron EQ

Mariano Gomez Bidondo

Hace 7 años

Mauro Gomez

Diego Ortiz

Teofilo Rosales Gama

andres flores

Esteban Aedo

juan david jaramillo zuñiga

Diego Forero

Team Platzi

Andres Gallardo

Jose Calvano

Alejandro González Reyes

walter Jorge

José Arturo Guamán Pachacama

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

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina