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

Obteniendo coordenadas usando Geocoding

37/80
Recursos

Ya que podemos almacenar y usar la informaci贸n en Firebase, ahora vamos a agregar un nuevo m茅todo que nos va a permitir obtener las coordenadas geogr谩ficas de una direcci贸n que ingresemos y almacenar la informaci贸n en Firebase.

El enlace del json es:

http://maps.google.com/maps/api/geocode/xml?address=78-43+diagonal+70f,+Bogota,Colombia

Lo que te muestro resaltado en negrita es la direcci贸n de la que quieres obtener la informaci贸n.

Aportes 27

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Estos cursos se DEBEN ACTUALIZAR!!!

Tuve mucho problema para activar esto de la geolocalizacion , ya que el tema esta muy desactualizado, pero les dejo mi solucion para que puedan avanzar primero ya no se usa el Http, debes importar en lugares.service.ts

<import {HttpClient} from "@angular/common/http";>

en el contructor agregar la variable

<private Http:HttpClient>

Despues el metodo del GeoData

<public obtenerGeoData(direccion){
    return this.Http.get('https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyCiGsoFevMN2J-dXWtD_31AN4UkraR4Hq0&address='+ direccion);
  }>

Ya con eso deberia de funcionar, recordar importar el modulo en app.module.ts

<import { HttpClientModule } from '@angular/common/http';>

Y despues el @ngModel

en los imports

<HttpClientModule>

Solucione:
Debes habilitar la opci贸n de Geocoding API
https://console.cloud.google.com/google/maps-apis

public obtenerGeoData(direccion){
        return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=TU_API_KEY_MAPS&address='+direccion);
      }
guardarLugar(){
     var direccion = this.lugar.calle+','+this.lugar.ciudad+','+this.lugar.pais;
     this.lugaresService.obtenerGeoData(direccion).subscribe((result: any) =>{
         this.lugar.lat = result.results[0].geometry.location.lat;
         this.lugar.lng = result.results[0].geometry.location.lng;   
         this.lugar.id = Date.now();
         this.lugaresService.guardarLugar(this.lugar);
         alert('Negocio guardado con exito!');
         this.lugar = {};
     });
    }

La nueva forma de usarlo es mediante la api que est谩 en:
https://maps.googleapis.com/maps/api/geocode/json?key=YOUR_API_KEY&address=YOUR_DIRECTION
Sin olvidar activar en:
https://console.cloud.google.com/google/maps-apis
La opci贸n de Geocoding API

Seria genial si actualizaran o hicieran un nuevo curso de Angular 7.

A ver, tengo este problema:

error_message: "You have exceeded your daily request quota for this API. If you did not set a custom daily request quota, verify your project has an active billing account: http://g.co/dev/maps-no-account"

Tanto para el mapa y la geolocalizaci贸n.
En cuotas de la consola de google me aparece que s贸lo tengo 1 request diaro. 驴?驴?!!! Me pide facturaci贸n 馃槮

A tener en cuenta! en suscribe hay que decirle que es de tipo any:

.subscribe((result:any) => {

Creo que a alguien le servir谩.
Cuando obteng谩is la API Key acordaros de activarla para Geocoding, yo no lo ten铆a, y como si ten铆a el JavaScript ve铆a bien el mapa y no entend铆a por qu茅 no funcionaba para sacar las coordenadas.
Adem谩s para probar uso Postman , es un software para hacer peticiones get o post, entre otras, y poner los par谩metros que tu aplicaci贸n requiera y ver los resultados en json, xml鈥 Me ayud贸 mucho en esto.
Saludos!!!

La Key de google maps me exige facturar

Buenas, tengo este error al hacer el resquest, la respuesta es la siguiente:
**Unexpected end of input
**
adjunto el request :

    public obtenerGeoData(direccion)
    {
       return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=AQUI_API_KEY&address='+ direccion);
    }

C[odigo de crear.component.ts :


  guardarLugar() {

    var direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    
    this.lugaresService.obtenerGeoData(direccion)
      .subscribe((result => {

        this.lugar.lat = 0;
        this.lugar.lan = 0;
        this.lugaresService.guardarLugar(this.lugar);
        alert("Se insertaron los datos correctamente");
        this.lugar = {};

      }));
  }

Hola 驴como hago para conocer mi posicion actual?

Result retorna vac铆o porque la conexi贸n es rechazada , esta documentaci贸n del curso est谩 depreciada , la petici贸n llega , pero result retorna:

result = {error_message: "This API project is not authorized to use this API.", results: Array(0), status: "REQUEST_DENIED"}

creo que la 煤nica soluci贸n real es continuar sin esta funcionalidad y seguir viendo el resto del curso .

Me funcion贸 as铆:
crear.component.ts

import { Component } from '@angular/core';
import { LugaresService } from '../services/lugares.service';
import { GeoInterface } from './../interfaces/response-geo-api.interface';

@Component({
  selector: 'app-crear',
  templateUrl: './crear.component.html'
})
export class CrearComponent implements OnInit {
  lugar:any = {};
  constructor(private lugaresService: LugaresService) {
  }
  guardarLugar() {
    var direccion = this.lugar.calle + ',' + this.lugar.ciudad + ',' + this.lugar.pais;
    this.lugaresService.obtenerGeoData(direccion)
                       .subscribe((result: GeoInterface) => {
                         this.lugar.lat = result.results[0].geometry.location.lat;
                         this.lugar.lng = result.results[0].geometry.location.lng;
                        this.lugar.id = Date.now();
                        this.lugaresService.guardarLugar(this.lugar);
                        alert('Negocio guardado con 茅xito!');
                        this.lugar = {};
                       });
  }
  ngOnInit() {

  }
}

despues se crea una interface: response-geo-api.interface.ts:

export interface GeoInterface {
    results: any;
}

En lugares.service.ts se modifica la ruta:

public obtenerGeoData(direccion){
        return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?key=YOUR-KEY&address='+ direccion);
    }

Eso es todo lo estoy usando con la ultima version de Angular (noviembre 2018) y funciona ok. Creditos: recopilacion de los mensajes que escribieron todos jejej

Alguien que me ayude plz, al constructor implemento:

constructor(private afDB: AngularFirestore,private Http: HttpClient){

      }

funcion obtenerGeoData:

public obtenerGeoData(direccion) {
        //https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=
        return this.Http.get()
    }```

pero en el metodo get me dice:



[ts] La propiedad 鈥榞et鈥 no existe en el tipo 鈥楬ttpClient鈥.

estaba leyendo la documentacion de Angular pero me dice que aun se ocupa HttpClient.get()

AYUDA PLZ!

Tengo un error cuando pongo **_subscribe _**como que no lo reconoce la palabra. Si alguien me pudiera ayudar por favor.
Gracias.

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

    }
    guardarLugar(){
        var direccion = this.lugar.calle+','+this.lugar.ciudad+','+this.lugar.pais;
        this.lugaresService.obtenerGeoData(direccion);
        .subscribe((result) => {
            debugger;
            this.lugar.lat = 0;
            this.lugar.lng = 0;

            this.lugar.id = Date.now();
            this.lugaresService.guardarLugar(this.lugar);
            alert('Negocio guardado con exito!');
            this.lugar = {};
        });
    }
}```
Tengo un error cuando pongo la palabra subscribe como que no lo reconoce. Por favor si alguien me puede ayudar con este problema que tengo. Gracias. ``` @Component({ selector: 'app-crear', templateUrl: './crear.component.html' }) export class CrearComponent { lugar:any = {}; constructor(private lugaresService: LugaresService){ } guardarLugar(){ var direccion = this.lugar.calle+','+this.lugar.ciudad+','+this.lugar.pais; this.lugaresService.obtenerGeoData(direccion); .subscribe((result) => { debugger; this.lugar.lat = 0; this.lugar.lng = 0; this.lugar.id = Date.now(); this.lugaresService.guardarLugar(this.lugar); alert('Negocio guardado con exito!'); this.lugar = {}; }); } } ``` ![]()

Qu茅 tal, alguien sabe 驴c贸mo se agrega un archivo css al proyecto y en qu茅 parte deber铆a ir? bueno, quiero agregar algunos iconos, en este caso de Iconic, seg煤n solo deber铆a de usar su archivo css, pero no s茅 d贸nde rayos colocar este archivo, ya que al colocarlo en un directorio a nivel de src y lo agrego al array de estilos de angular.json el proyecto no me compila, no s茅 d贸nde ni c贸mo usarlo鈥 alguna idea?

Pues no he podido generar la key de google maps porque no estoy dispuesto a introducir datos de TDC. Asi que mejor har茅 el ejercicio con otra API y googleando.

Realmente de esta manera el curso no es muy 煤til. Tache para Platzi por no actualizar.

bueno muchachos, asi lo realice y me funciono, para los que posiblemente no encontraron la solucion.

en lugares.services.ts

public obtenerGeoData(direccion)
{
return this.http.get(鈥https://maps.googleapis.com/maps/api/geocode/json鈥, {
params : {
address: direccion,
key: 鈥楢IzaSyCj9igPrB5Uui9ei3GdlgXie_nzL4M79SA鈥
}
});
}

la clave de la api deben sacarla de la pagina en credenciales.
esto por fin les arrojara el json en la consola cuando creen un negocio.

y en crear.component.ts

guardarLugar()
{
var direccion = this.lugar.calle +鈥&鈥+this.lugar.ciudad+鈥&鈥+this.lugar.pais;
this.lugaresService.obtenerGeoData(direccion)
.subscribe((result : any) =>{
console.log(result)
this.lugar.lat = result.results[0].geometry.location.lat;
this.lugar.lng = result.results[0].geometry.location.lng;

  if(this.id != 'new')
  {
    this.lugaresService.editarLugar(this.lugar);
    alert('Negocio editado correctamente');
    this.lugar = {};
  }
  else
  {
    this.lugar.id = Date.now(); // crea un id imposible de duplicar ya  que nos imprime la fecha y hora en milisegundos
    this.lugaresService.guardarLugar(this.lugar);
    alert('Negocio Creado correctamente');
  }
  this.lugar = {};
});

se realiza el llamado de los datos necesarios del json que arroja la funcion de lugares.services.ts.

espero les funcione, lo acabe de hacer

creoq ue avanzare un request por dia, ya que la api de google no deja avanzar 馃槮

Pueden usar como alternativa la api de https://locationiq.com/ totalmente gratis

Estoy siguiendo los pasos y todo bien solamente que al poner

this.place.lat = result.results[0].geometry.location.lat;
this.place.lng = result.results[0].geometry.location.lng;>

en results[0] me marca error al compilar y me dice que no existe en el Object
adjunto imagen del error. espero y puedan ayudarme Gracias.

Excelente! No sirvi贸 de nada Geocoding porque es pago.

Me funcion贸 de la siguiente manera:
鈥 En el crear.component.ts:
guardarLugar() {
var direccion = this.lugar.calle + 鈥,鈥 + this.lugar.ciudad + 鈥,鈥 + this.lugar.pais;
this.lugaresService.obtenerGeoData(direccion).subscribe((result:any) => {
//debugger;
this.lugar.lat = result.results[0].geometry.location.lat;
this.lugar.lng = result.results[0].geometry.location.lng;

  this.lugar.id = Date.now();
  this.lugaresService.guardarLugar(this.lugar);
  alert('Negocio guardado con exito!!');
  this.lugar = {};
}
);

}

鈥 En el lugares.service.ts:
public obtenerGeoData(direccion:any){
return this.http.get(鈥https://maps.googleapis.com/maps/api/geocode/json?key=MI API KEY&address=鈥+direccion);
}

鈥 En el app.module.ts:
import { HttpClientModule } from 鈥楡angular/common/http鈥;
en el imports: HttpClientModule

Hay un feature en TS para la concatenaci贸n, en lo personal me gusta m谩s este estilo.

  const direccion = `${this.lugar.calle},${this.lugar.ciudad},${this.lugar.pais}`;

Hasta aqu铆 llegue XD, ya luego me tomo un curso de Angular m谩s actual. Pero esta bueno el curso.
Lo del mapa es de pago y no me sale el (http) solo http2xxx

Pregunta curiosa!!! Soy de venezuela y no tengo tarjeta de cr茅dito valida para autenticar una forma de pago en google, como podr铆a hacer en este caso?