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(鈥榣ugares/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鈥檛 bind to 鈥榥gModel鈥 since it isn鈥檛 a known property of 鈥榠nput鈥.
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 鈥渁ngularfire2/database/database鈥;
y deber铆a ser:
import {AngularFireDatabase} from 鈥渁ngularfire2/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 鈥楲azyMapsAPILoaderConfigLiteral鈥.
Object literal may only specify known properties, but 鈥榓pykey鈥 does not exist in type 鈥楲azyMapsAPILoaderConfigLiteral鈥. Did you mean to write 鈥榓piKey鈥?

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 鈥榙atabase鈥 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鈥檛 resolve 鈥榓ngularfire2/database/database鈥 in 'C:\Users\FABER\platzisquare\src\app\services鈥
i 锝dm锝: 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: 鈥榓pp-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: 鈥榩agado鈥 , cercania: 1, distancia: 1 , active: true , nombre:鈥楩loreria de Gardenia鈥 , descripcion: 鈥楩loreria 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: 鈥榞ratuito鈥 , cercania: 1, distancia: 1.8 , active: true , nombre:鈥楧onas la pasadita鈥 , descripcion:鈥楲as 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: 鈥榞ratuito鈥 , cercania: 2, distancia: 5 , active: true , nombre:鈥榁eterinaria Huellitas Felices鈥 , descripcion:鈥楲a 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: 鈥榞ratuito鈥 , cercania: 3, distancia: 10 , active: false , nombre:鈥楽ushi 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: 鈥榩agado鈥 , cercania: 3, distancia: 35 , active: true , nombre:鈥楬otel la Gracia鈥 , descripcion:鈥楨l 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: 鈥榞ratuito鈥 , cercania: 3, distancia: 120 , active: false , nombre:鈥榋apateria el Clavo鈥 , descripcion:鈥榋apateria 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(鈥榣ugares/1鈥).set(lugar);
}
}

  • Generar del componente 鈥淐rear鈥

  • En el servicio Lugar importar m贸dulo 鈥淎ngularFireDatabase鈥

  • Crear funci贸n guardarLugar haciendo 鈥渟et鈥 del objeto 鈥渓ugar鈥 en el nodo 鈥溾榣ugares/1鈥欌

  • En Firebase ir a la opci贸n 鈥淒atabase鈥 / 鈥淩ealtime Database鈥

  • Crear el nodo 鈥渓ugares鈥

  • Guardar data en el formulario de la p谩gina 鈥淐rear鈥

me sale el siguiente error:

ERROR TypeError: Cannot read property 鈥榥ombre鈥 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鈥檛 bind to 鈥榥gmodel鈥 since it isn鈥檛 a known property of 鈥榠nput鈥. 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