Curso de Angular

Curso de Angular

Instruido por:
Nicolas Molina
Nicolas Molina
Básico
8 horas de contenido
Ver la ruta de aprendizaje
Platzi Shop
Proyecto del curso
Platzi Shop

Desarrolla una tienda en línea con Angular desde cero. Aprovecha las características de Angular para construir una aplicación en menos tiempo usando componentes, módulos y rutas. Usa Angular Material para dar estilo los elementos de tu webapp. Despliega tu aplicación de e-commerce a Internet.

Curso de Angular

Curso de Angular

Progreso del curso:0/56contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/56contenidos(0%)

Introducción a Angular

Material Thumbnail

Bienvenida e introducción al curso

00:59 min

Material Thumbnail

Instalación y preparación del entorno de desarrollo

03:05 min

Material Thumbnail

Preparando el entorno para Windows

03:05 min

Material Thumbnail

Preparando el entorno para Linux

04:12 min

Material Thumbnail

Crea tu primera aplicación en Angular

03:16 min

Estructuras de control

Material Thumbnail

Introducción al Angular CLI y proyecto del curso

04:28 min

Material Thumbnail

String interpolation

03:12 min

Material Thumbnail

Data binding en Angular

02:25 min

Material Thumbnail

Uso de ngFor add y delete

07:53 min

Material Thumbnail

Uso de ngFor para recorrer objetos

07:35 min

Componentes

Material Thumbnail

¿Qué son los componentes y decoradores?

07:36 min

Material Thumbnail

Uso de Inputs y Outputs

10:24 min

Material Thumbnail

Ciclo de vida de los componentes

09:23 min

Material Thumbnail

Estilos para mostrar la lista de productos

09:32 min

Material Thumbnail

Uso de ng generate y ng lint

04:07 min

Pipes y Directivas

Material Thumbnail

Usando los pipes de Angular

06:50 min

Material Thumbnail

Construyendo un propio pipe

03:54 min

Material Thumbnail

Construyendo una directiva propia

03:51 min

Módulos y Rutas

Material Thumbnail

Introducción al NgModule

02:20 min

Material Thumbnail

Creando rutas en Angular

14:05 min

Material Thumbnail

Creando la página home de la tienda

13:07 min

Material Thumbnail

Usando routerLink y routerActive

10:38 min

Material Thumbnail

Creando el detalle de cada producto

11:03 min

Material Thumbnail

Elaboración de la página de detalle de producto

05:36 min

Material Thumbnail

Creando el módulo del website con vistas anidadas

06:20 min

Material Thumbnail

Preparar el proyecto para Lazy Loading

10:30 min

Material Thumbnail

Implementación del Lazy Loading

09:11 min

Material Thumbnail

Creando un shared module y core module

15:21 min

UI/UX, estilos

Material Thumbnail

Instalando Angular Material

10:30 min

Material Thumbnail

Instalando un sistema de grillas

02:33 min

Material Thumbnail

Creando el header

09:53 min

Material Thumbnail

Estilos a product-card

09:48 min

Material Thumbnail

Creando vistas con Angular schematic

13:15 min

Servicios

Material Thumbnail

Creando nuestros propios servicios: HTTP Client

14:10 min

Material Thumbnail

Haciendo una solicitud GET desde el servicio

09:50 min

Material Thumbnail

Haciendo una solicitud POST desde el servicio

09:02 min

Material Thumbnail

Haciendo una solicitud PUT y DELETE desde el servicio

10:20 min

Material Thumbnail

Ambientes en Angular

10:29 min

Material Thumbnail

Lista de inventario y detalle

14:12 min

Material Thumbnail

Cierre de ejercicio de detalle

09:04 min

Formularios

Material Thumbnail

Introducción al FormControl

16:09 min

Material Thumbnail

Creando el formulario de productos

10:58 min

Material Thumbnail

Ajustar estilos en un formulario

10:05 min

Material Thumbnail

Validaciones personalizadas

12:40 min

Material Thumbnail

Editar un producto a través de un formulario

09:30 min

Programación reactiva

Material Thumbnail

Añadiendo productos al carrito

07:58 min

Material Thumbnail

Usa un pipe para hacer un contador de productos

04:34 min

Material Thumbnail

Creando la página de la orden y uso de async

14:28 min

Firebase

Material Thumbnail

Instalar Angular Firebase y configurar Firebase Auth

12:45 min

Material Thumbnail

Implementando Auth y Guards

13:16 min

Material Thumbnail

Subiendo una imagen a Firebase Storage

15:07 min

Material Thumbnail

Haciendo deploy a Firebase Hosting

04:14 min

Conclusiones

nuevosmás votadossin responder
Cristian Florez
Cristian Florez
Estudiante

Alguien sabe por que se hacen dos peticiones, cuadno hago el post?
Esto es lo que devuelven, una donde todo esta ok 201 y la otra con un 204

Request URL: https://platzi-store.herokuapp.com/products/
Request Method: POST
Status Code: 201 Created
Remote Address: 54.159.116.102:443
Referrer Policy: strict-origin-when-cross-origin
Request URL: https://platzi-store.herokuapp.com/products/
Request Method: OPTIONS
Status Code: 204 No Content
Remote Address: 54.159.116.102:443
Referrer Policy: strict-origin-when-cross-origin

funcion en product.services.ts

createProduct(product: any) { 
    returnthis.http.post(
      `${environment.url_api}platzi-store.herokuapp.com/products/`,
      product
    );
  }

funcion desde el componente

createContact() {
    const newProductt = {
      id: '15',
      title: 'Un titulo cualquiera',
      image: 'assets/igames/banner-1.jpg',
      price: 5000,
      description: 'una descripcion cualquiera',
    };
    this.landingService.createProduct(newProductt ).subscribe((product) => {
      console.log(product);
    });
  }
0
Gibriam Octavio Ovando Cervantes
Gibriam Octavio Ovando Cervantes
Estudiante

Alguien sabe porque me sale este error TS2530: Object is possibly 'null’ cuando agrego los .error , .dirty o cualquier otro.
valor que regresa la funcion de priceField()

<div *ngIf=“priceField.errors && priceField.dirty”><p *ngIf=“priceField.hasError(‘price_invalid’)”>no te debes pasar de 1000</p><p *ngIf=“priceField.hasError(‘required’)”>el campo es requerido</p></div>
1
paomorcas
paomorcas
Estudiante

Hola, Alguien me podría aclarar donde es mejor iniciar las variables, si en el constructor o fuera de el.

1
Isaac Noha Martínez Ramírez
Isaac Noha Martínez Ramírez
Estudiante

¿Qué es mejor construir el formulario en el ngOnInit o en el constructor? porque veo muchos ejemplos que casi siempre, lo hacen, en el ngOnInit, si alguien podría retroalimentarme más, con esta duda, por favor.

0
Josue Tapia Linarez
Josue Tapia Linarez
Estudiante

¿con esto ya instale Angular y Angular CLI?

1
Leylon Ocaña Sanchez
Leylon Ocaña Sanchez
Estudiante

Como seria para obtener los datos para los CheckBox, ComboBox, ??

0
Carlos Sáenz
Carlos Sáenz
Estudiante

No me aparece la carpeta images. como puedo agregarlas?

2
diegodorado78
diegodorado78
Estudiante

podria decir yo entonces que un decorador en Angular es :
tipo de declaracion que me define (estructura) y elementos de un componente (para llevar un orden)?
como un molde para crear clases a partir de elementos ya estructurados/
por ejemplo el decorador Component me dice que si quiero crear un componente en Angular debo definir con que etiqueta sera llamado y la ruta del archivo donde se aloja dicho template?

1
diegodorado78
diegodorado78
Estudiante

yo en lugar de <img [src]=“product.image’
hice
<img width=“250px"src={{product.image}} alt=””> y corre perfectamente, existe alguna diferencia o esstoy haciendo una mala practica?..
vengo de React y me parece mas ordenado Angular why?

1
Jairo Manuel Rodriguez Gonzalez
Jairo Manuel Rodriguez Gonzalez
Estudiante

Saludos, espero puedan ayudarme cuando escribo en app.component.ts no aparece nada de lo que escribo ¿alguien sabe el porqué de esto?

0