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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Configurando Firebase en nuestro proyecto

34/80
Recursos

Firebase nos va a ayudar a preservar la informaci贸n de PlatziSquare y nos permite acceder a 茅sta desde donde tengamos conexi贸n a internet.
Para esto vamos a crear un proyecto de Firebase y lo configuramos en nuestro proyecto.

Aportes 17

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Vi que muchos tienen el problema siguiendo esta leccion, lo que sucede es que se ha actualizado las librerias de firebase y el link actual del tutorial o guia recomendada para su configuracion es esta:
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

Espero que les resuelva los conflictos, saludos

Para optimizar la instalaci贸n por el CLI

npm install firebase @angular/fire  --save

Buenas noches. Aqui dejo una guia de como configurar el firebase actualmente ya que se ha actualizado la guia.

aca les dejo el link https://coursetro.com/posts/code/54/Angular-4-Firebase-Tutorial:-Make-a-Simple-Angular-4-App

Espero que les sirva mucho!

Este link para instegrar Angular 8 con Firebase https://www.youtube.com/watch?v=6AX-fhx59Hg

<ng generate service Service/LugaresService>
npm install firebase @angular/fire --save```

npm install angularfire2 firebase --save

Este es el package.json para que angularfire2 y firebase sean compatibles en ambos :

{
  "name": "platzisquare",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/fire": "^5.1.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angularfire2": "^5.0.0-rc.3",
    "core-js": "^2.4.1",
    "firebase": "^4.6.0",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.7",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Yo borre la carpeta node_modules y ejecute el comando 鈥渘pm i鈥 y listo, solucionado.

El nombre del m贸dulo cambio a @angular/fire y si se instala junto a firebase con la versi贸n 5.x.x, entra en conflicto firebase debido a algo llamado grpc lo solucione cambiando firebase a la versi贸n 4.12.1 y fue la unica soluci贸n que encontr茅. Alguno puede sugerir una soluci贸n para usar la versi贸n 5 en adelante sin ning煤n problema?

ami me servio hacer esto

npm install [email protected] [email protected] --save

para poder continuar con la clase

Hola amigos tengo demasiados problemas instalando la libreria angularfire2, estoy usando la version 7 de angular. Alguien que me pueda ayudar

Alguien me pude decir que es esto de instalar cordova y ionic? No entiendo de que se trata.

en la guia para instalar me dale el siguiente comando:
$ npm install angularfire2 firebase promise - polyfill - save

pero me da error鈥 cuando borro las palabras 鈥減romise - polyfill鈥 me instala pero me dice warning que algunas dependencias no fueron instaladas 鈥

Esta bien hacer esto?

Soluci贸n conflicto: Tuve muchos problemas con firebase2 y angularfire2. Entre ellos estaba este error principal:

ERROR in Error: Metadata version mismatch for module C:/xampp/htdocs/platzisquare/node_modules/angularfire2/index.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/xampp/htdocs/platzisquare/src/app/app.module.ts, resolving symbol AppModule in C:/xampp/htdocs/platzisquare/src/app/app.module.ts, resolving symbol

Para resolver el conflicto realizar los siguientes pasos:

$ npm install node-pre-gyp -g
$ npm uninstall angularfire2
$ npm install angularfire2@5.0.0-rc.3 --save
$ ng serve

Espero que sea de ayuda.

npm install angularfire2 firebase --save