Inicio del curso

1

De qué tratará este curso sobre Angular 4

Introducción a Angular 4

2

Versionamiento en Angular

3

Qué es Angular, versiones y ventajas

4

Typescript: qué es

5

Introducción al Proyecto: PlatziSquare!

Setup del Ambiente de Trabajo

6

Herramientas de trabajo y Angular CLI

7

Generación y estructura de Angular 4

8

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

9

Para qué nos sirven los Módulos y Componentes

10

Tipos de Data Binding y String Interpolation

11

Property Binding

12

Event Binding

13

Two Way Data Binding

14

Directivas en Angular 4 y ngFor

15

Directiva ngIf

16

Instalando librerías con NPM (Google Maps)

Directivas

17

Directivas ngStyle y ngClass

18

Directiva ngSwitch

19

Directiva de atributo

20

Host Listeners

21

Host Binders

Angular UI

22

Angular Material y Bootstrap

23

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

24

Qué hace el router en Angular 4

25

Implementación de Rutas en el Proyecto

26

Diferencias entre href y routerLink

27

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

28

Parámetros en Rutas

29

Parámetros tipo Query

30

Creando una vista de detalle para el proyecto

31

Creando la página de contacto para PlatziSquare

Servicios

32

Qué son los servicios en Angular 4

33

Creando nuestro propio servicio

34

Configurando Firebase en nuestro proyecto

35

Guardando Records en Firebase

36

Obteniendo records desde Firebase

37

Obteniendo coordenadas usando Geocoding

38

Reto: Crear una vista para editar records

39

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

40

Funcionamiento de los llamados Http y Sockets

41

Qué es una arquitectura cliente - servidor

42

Enviando llamados tipo POST

43

Enviando llamados tipo GET

44

Formateando respuestas del servidor con el operador map()

45

Manejando errores HTTP

Pipes

46

Utilidad de los Pipes en Angular 4

47

Usando los pipes por defecto de Angular

48

Parámetros en pipes

49

Creando nuestro propio pipe

Animaciones en Angular

50

Configurando animaciones en nuestro proyecto

51

Transiciones

52

Callbacks

53

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

Testing en Angular

54

Introducción a unit tests

55

Configuración de testing por default

56

Corriendo los tests

57

Creando unit tests para componentes

58

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

59

Cómo funcionan los JSON Web Tokens

60

Preparación de vistas para login y registro

61

Registrando usuarios

62

Loggeando usuarios

63

Protección de Rutas

64

Autenticación con redes sociales.

65

Logout

RxJS

66

Qué es RxJS

67

Configurando RxJS en nuestro proyecto

68

Uso de los Observables

69

Implementando un TypeAhead

70

Implementando un TypeAhead 2

71

Solución al reto autocompletar los campos de dirección usando observables

Publicando nuestro proyecto

72

Publicando en Firebase Hosting

Fin del curso

73

Conclusión ¿Qué aprendimos en el curso?

74

Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Sesiones en vivo

75

Creando un traser bullet de PlatziSquare

76

Sesión de preguntas y respuestas

77

Release de Angular 5

78

Sesión de preguntas y respuestas

79

Angular Universal

Contenido Bonus

80

Actualización de angular, versión 6.0

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Guardando Records en Firebase

35/80
Recursos

Ya tenemos nuestro proyecto configurado para tener acceso a Firebase, ahora vamos a construir una nueva página en la que podemos agregar nuevos negocios y que éstos negocios se queden almacenados en la base de datos en Firebase.

Aportes 25

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Hola Buenas!!
Ohh Costo bastante debido a las últimas actualizaciones…
Dejo aquí como me funciono…

  1. En consola: npm install @angular/fire firebase --save

  2. En app.component.ts agregue:

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxx",
    authDomain: "xxxxx",
    databaseURL: "xxxxx",
    projectId: "xxxxx",
    storageBucket: "xxxxx",
    messagingSenderId: "xxxxxx"
  }
};

-------------------------------
  imports: [
    BrowserModule,
    FormsModule,
    AgmCoreModule.forRoot({
      apiKey: 'xxxxx'
    }),
    Routing,

    AngularFireModule.initializeApp(environment.firebase, 'PlatziSquare'), 
    AngularFirestoreModule,
    AngularFireAuthModule, 
    AngularFireStorageModule

  ],

  1. En crear.component.ts agregue:
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LugaresService } from '../services/lugares.service';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html',
  styleUrls: ['./crear.component.css']
})

export class CrearComponent {
  lugar:any={};

  constructor(private lugaresService:LugaresService){
  
  }

  guardarLugar(){
    this.lugaresService.guardarLugar(this.lugar)
  };

}
  1. En lugares.service.ts agregue:
import {Injectable} from "@angular/core";
import { AngularFirestore } from "@angular/fire/firestore";
@Injectable()
export class LugaresService{
    lugares:any=[
	//contenido
      ];

    constructor(private afDB:AngularFirestore){}
    public guardarLugar(lugar){
        console.log(lugar);
        this.afDB.collection('lugares').doc('1').set(lugar); 
        
    };
}

Donde el doc(‘1’) es en reemplazo de ref(‘lugares/1’) que se ve en el video…

  1. En las reglas del firestore:
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
  1. Y si reviso en firestore:

Espero que les pueda ayudar!!

Muchachos tengo un repo con el codigo por si no les funciona , el curso está des actualizado pero yo lo tengo andando en el repo.

https://github.com/ivancardozo11/Proyecto-Angular , exitos y no dejen el curso .

Se actualizó, ahora sigan estos pasos para instalar firebase
https://github.com/angular/angularfire2/blob/HEAD/docs/install-and-setup.md

En el tutorial no viene nada del realtimedatabase (ejemplo de este vídeo, pero aquí escribo ambas soluciones)

Este no es el ejemplo del curso, pero para que se den una idea de como se hace.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

import { FormsModule } from '@angular/forms';

/*firebase*/
**import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';**

**import { AngularFireDatabaseModule } from '@angular/fire/database';**

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,

    **AngularFireModule.initializeApp(environment.firebase), // imports firebase/app needed for everything
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
	  AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
	  AngularFireStorageModule, // imports firebase/storage only needed for storage features
    AngularFireDatabaseModule**
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

y en donde van a conectar la base de esta manera

app.component.ts

import { Component } from '@angular/core';
import { AppComponent } from './app.component';
**import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabase } from '@angular/fire/database';**

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'ejemplofirebase';

  companerosProfi:any = {}

  constructor(private db: AngularFirestore, private datab: AngularFireDatabase) {}

  /*ref = this.db.ref("server/saving-data/fireblog");*/

  crearCompanero(){
  	console.log(this.companerosProfi)
   ** //this.db.collection('companerosProfi').doc('3').set(this.companerosProfi);  //AngularFireStore
    this.datab.database.ref('companerosProfi/2').set(this.companerosProfi); //AngularFireDatabase**
  }

}

Espero les ayude, si no lo explico tan bien es que quiero seguir con el curso haha, saludos.

Enero 24, 2019:

Previo a todo, tener instalado el firebase como dice el prof:

npm install angularfire2 firebase --save

Mi experiencia fue:

  1. Crear en Firebase una base de datos FireStore Database.
  2. Al correr el proyecto y guardar el formulario siempre en la consola web me decía PERMISSION DENIED.
  3. No pude borrar esa base de datos (quizá por desconocimiento mio en Firebase) así que borré el proyecto completo.
  4. Cree uno nuevo, actualicé las configuraciones en app.module.ts
  5. En Firebase ahora escogí RealTime Database y cree el nodo lugares.
  6. Y funcionó bien todo, guardó tal como el video.
  7. Sin modificar librerías ni importaciones.

Saludos

No pude hacerlo andar con la versión del curso ni con los aportes que dejaron aqui… lo logre siguiendo este video: https://www.youtube.com/watch?v=6AX-fhx59Hg

Estaria bueno que los de Platzi publiquen una actualización del codigo para hacer andar este ejemplo.

Si tienen el mismo problema: (No pueden colocar el [(ngModel)] en el input)
error NG8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
Aquí la solución:
https://www.angularjswiki.com/angular/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input/

Trabajando con Angular 8 y FirebaseDatabase.
Funcionando correctamente

Crear compomentes Crear

ng generate component Crear

buenas clases

Excelente implementación con Firebase.

Profe queria avisarle que ésta mal el archivo siguiente:
src/app/services -> archivo 'lugares.service.tx’
Dentro de la pestaña de archivos.
En el codigo fuente dice lo siguiente:
import {AngularFireDatabase} from “angularfire2/database/database”;
y debería ser:
import {AngularFireDatabase} from “angularfire2/database”;

Gracias por su tiempo!

Funciona tal cual, a pesar de las librerías deprecadas hoy noviembre 2018, solo si es importante cambiar en la consola de firebase a Realtime Database para que funcione.

Al momento de mandar a guardar los datos del formulario, no me arroja ningún error por consola y mucho menos veo guardados los datos en la base. Porque puede ser que no me guarda los datos?

hola , aun me salen errores por la apikey del google maps. AYUDA!!
ERROR in src/app/app.module.ts(55,26): error TS2345: Argument of type ‘{ apykey: string; }’ is not assignable to parameter of type ‘LazyMapsAPILoaderConfigLiteral’.
Object literal may only specify known properties, but ‘apykey’ does not exist in type ‘LazyMapsAPILoaderConfigLiteral’. Did you mean to write ‘apiKey’?

se instalo perfectamente Firebase

En el momento de hacer la conexión con firebase no me genera errores pero tampoco me inserta datos. Alguien que haya tenido esta situación? 😭

Me da el siguiente ERROR si alguien puede guiarme le agradecería mucho!!!

ERROR TypeError: Cannot read property ‘database’ of undefined
at LugaresService.push…/src/app/service/lugares.service.ts.LugaresService.guardarLugar (lugares.service.ts:26)
at CrearComponent.push…/src/app/crear/crear.component.ts.CrearComponent.guardarLugar (crear.component.ts:16)
at Object.eval [as handleEvent] (CrearComponent.html:33)
at handleEvent (core.js:19545)
at callWithDebugContext (core.js:20639)
at Object.debugHandleEvent [as handleEvent] (core.js:20342)
at dispatchEvent (core.js:16994)
at core.js:17441
at HTMLAnchorElement.<anonymous> (platform-browser.js:993)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:42

Error:

Date: 2019-06-28T13:42:01.991Z - Hash: a1a71bc91e982f799729 - Time: 687ms
5 unchanged chunks
chunk {main} main.js, main.js.map (main) 38.4 kB [initial] [rendered]

ERROR in ./src/app/services/lugares.service.ts
Module not found: Error: Can’t resolve ‘angularfire2/database/database’ in 'C:\Users\FABER\platzisquare\src\app\services’
i 「wdm」: Failed to compile.

ERROR in src/app/services/lugares.service.ts(2,37): error TS2307: Cannot find module 'angularfire2/database/database'.

esta es mi version de angular:
/ \ _ __ __ _ _ | | __ _ _ __ / | | | |
/ △ \ | ’
\ / _| | | | |/ _ | '
| | | | | | |
/ ___ | | | | (
| | || | | (| | | | || |___ | |
/
/ __| |
|_
, |_,||_,|| _||_|
|___/

Angular CLI: 8.0.6
Node: 10.16.0
OS: win32 x64
Angular: 8.0.1
… animations, common, compiler, compiler-cli, core, forms
… language-service, platform-browser, platform-browser-dynamic
… router

Package Version

@angular-devkit/architect 0.800.3
@angular-devkit/build-angular 0.800.3
@angular-devkit/build-optimizer 0.800.3
@angular-devkit/build-webpack 0.800.3
@angular-devkit/core 8.0.3
@angular-devkit/schematics 8.0.6
@angular/cli 8.0.6
@angular/fire 5.2.1
@ngtools/webpack 8.0.3
@schematics/angular 8.0.6
@schematics/update 0.800.6
rxjs 6.4.0
typescript 3.4.5
webpack 4.30.0

pero me con las libreria de Firebase me deja en navegador en blanco, ya actualice las dependencia.

listo datos guardados exitosamente
archivo crear.component.ts
import { Component } from ‘@angular/core’;
import { LugaresService } from ‘…/services/lugares.service’;

@Component({
selector: ‘app-crear’,
templateUrl: ‘./crear.component.html’
})
export class CrearComponent {
lugar:any = {};
constructor(private lugaresService: LugaresService){

}
guardarLugar(){
  this.lugaresService.guardarLugar(this.lugar);
}

}
archivo lugares.service.ts
import { Injectable } from “@angular/core”;
import { AngularFireDatabase } from ‘@angular/fire/database’;
@Injectable()
export class LugaresService{
lugares:any = [
{id: 1, plan: ‘pagado’ , cercania: 1, distancia: 1 , active: true , nombre:‘Floreria de Gardenia’ , descripcion: ‘Floreria de Gardenia en Bogotá que ofrece arreglos y detalles florales, decoración de eventos y distribución al por mayor de flores de corte tipo exportación’},
{id: 2, plan: ‘gratuito’ , cercania: 1, distancia: 1.8 , active: true , nombre:‘Donas la pasadita’ , descripcion:‘Las Donas la pasadita caseras, también conocidas como donuts o rosquillas, son muy fáciles de preparar y constituyen una de las meriendas favoritas’},
{id: 3, plan: ‘gratuito’ , cercania: 2, distancia: 5 , active: true , nombre:‘Veterinaria Huellitas Felices’ , descripcion:‘La Veterinaria Huellitas Feliceses la rama de la medicina que se ocupa de la prevención, diagnóstico y tratamiento de enfermedades, trastornos y lesiones’},
{id: 4, plan: ‘gratuito’ , cercania: 3, distancia: 10 , active: false , nombre:‘Sushi Suhiroll’ , descripcion:'Sushi Suhiroll es un plato de origen japonés basado en arroz aderezado con vinagre de arroz, azúcar y sal '},
{id: 5, plan: ‘pagado’ , cercania: 3, distancia: 35 , active: true , nombre:‘Hotel la Gracia’ , descripcion:‘El Hotel la Gracia se encuentra en Bogotá y ofrece terraza, salón compartido y bar. Este hotel de 3 estrellas ofrece WiFi gratuita.’},
{id: 6, plan: ‘gratuito’ , cercania: 3, distancia: 120 , active: false , nombre:‘Zapateria el Clavo’ , descripcion:‘Zapateria el Clavo es un nuevo concepto de zapatería de moda y fiesta en València. Una oportunidad para vestir tus pies y sentirte cómoda. ¡Ven a conocernos!’}
];
constructor(private afDB: AngularFireDatabase){}
public getLugares(){
return this.lugares;
}
public buscarLugar(id){
return this.lugares.filter((lugar) => lugar.id == id ) [0] || null;
}
public guardarLugar(lugar){
console.log(lugar);
this.afDB.database.ref(‘lugares/1’).set(lugar);
}
}

  • Generar del componente “Crear”

  • En el servicio Lugar importar módulo “AngularFireDatabase”

  • Crear función guardarLugar haciendo “set” del objeto “lugar” en el nodo “‘lugares/1’”

  • En Firebase ir a la opción “Database” / “Realtime Database”

  • Crear el nodo “lugares”

  • Guardar data en el formulario de la página “Crear”

me sale el siguiente error:

ERROR TypeError: Cannot read property ‘nombre’ of undefined
at Object.eval [as updateDirectives] (CrearComponent.html:5)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258)
at checkAndUpdateView (core.js:44270)
at callViewAction (core.js:44636)
at execComponentViewsAction (core.js:44564)
at checkAndUpdateView (core.js:44277)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)

Tuve el siguiente error: Can’t bind to ‘ngmodel’ since it isn’t a known property of ‘input’. que me mostraba en “crear.component.html

Y después de 72 horas revisando todo paso a paso, me dí cuenta que en el input estaba colocando el código de esta forma:

<input type="number" class="form-control" [(ngmodel)]="lugar.cercania">

En vez de colcoarlo de esta forma:

<input type="number" class="form-control" [(ngModel)]="lugar.cercania">

Si no lo ven, el error está en escribir ngmodel sin camel Case, como lo explicó el profe Ibarra en un principio. Debe escribirse ngModel