Curso de Angular 12

En este curso de Angular 12 aprenderás a trabajar con Angular. Empezamos desde cero explicando ¿Qué es Angular? hasta realizar una aplicación básica de Angular. Este proyecto fue creado con Angular CLI en la versión 12.0.1.

🔖 Temario del curso:

• 0:00:00 Intro
• 0:00:20 Angular 12 : ¿Qué es Angular?
• 0:01:10 Angular 12 : ¿Qué es Angular CLI?
• 0:01:45 Angular 12 : Como instalar Angular CLI & prerrequisitos
• 0:03:53 Angular 12 : Instalando el Angular CLI
• 0:05:48 Angular 12 : Creando tu primera aplicación de Angular
• 0:07:25 Angular 12 : Estructura de carpetas y ficheros de Angular
• 0:13:08 Angular 12 : app.module de Angular [declaration, imports, providers, bootstrap, exports]
• 0:14:53 Angular 12 : assets y enviroments
• 0:15:27 Angular 12 : ¿Qué es un componente en Angular?
• 0:16:32 Angular 12 : Métodos y propiedades en TypeScript
• 0:16:32 Angular 12 : Interpolación, One-way binding, Two-way binding
• 0:22:16 Angular 12 : Creando tu primer componente en Angular y como reutilizar componentes
• 0:27:45 Angular 12 : Instalamos json-server npm i -g json-server
• 0:30:00 Angular 12 : Configuramos el server en el package.json
• 0:33:30 Angular 12 : Instalar Angular material
• 0:36:20 Angular 12 : Agregamos el modulo para Angular material
• 0:40:50 Angular 12 : Componente Inline Angular
• 0:42:42 Angular 12 : Rutas en Angular,
• 0:45:00 Angular 12 : Creamos un componente manual para nuestra ruta
• 0:50:30 Angular 12 : Nuestra primera ruta en Angular
• 0:54:10 Angular 12 : Creamos el modulo de Products
• 0:58:35 Angular 12 : Reto
• 0:59:53 Angular 12 : Solución al Reto crear nuevo componente Product
• 1:01:01 Angular 12 : ¿Qué es una Interface en TypeScript?
• 1:01:50 Angular 12 : Creamos la Interface de Product
• 1:04:24 Angular 12 : Creamos el Service de Products
• 1:06:33 Angular 12 : ¿Qué es un Service en Angular?
• 1:08:00 Angular 12 : HttpClientModule en Angular
• 1:09:40 Angular 12 : Tu primera petición Http con Angular - getProducts()
• 1:13:15 Angular 12 : Recibiendo data desde la API
• 1:16:05 Promo
• 1:16:30 Angular 12 : Renderizamos los productos en el HTML con el pipe JSON
• 1:18:35 Angular 12 : ¿Qué es un Pipe?
• 1:19:34 Angular 12 : Empezamos a maquetar el listado de productos
• 1:19:34 Angular 12 : mat-card de Angular Material
• 1:23:44 Angular 12 : Directiva *ngFor de Angular
• 1:24:00 Angular 12 : Tipos de Directivas de Angular
• 1:24:30 Angular 12 : Utilizamos *ngFor para renderizar nuestros productos
• 1:26:23 Angular 12 : mat-button de Angular Material
• 1:27:44 Angular 12 : mat-icon de Angular Material
• 1:30:30 Angular 12 : Maquetamos el product Card
• 1:34:50 Angular 12 : Empezamos a trabajar con el componente Product
• 1:35:37 Angular 12 : Comunicación entre componentes en Angular @Input
• 1:39:40 Angular 12 : ¿Qué es el decorador @Output?
• 1:41:10 Angular 12 : Usando el decorador @Output, comunicación entre componentes en Angular @Output
• 1:48:44 Angular 12 : Resumen @Input y @output en Angular
• 1:49:01 Promo
• 1:49:23 Angular 12 : Creamos el ShoppingCartService
• 1:59:28 Angular 12 : Utilizamos el ShoppingCartService
• 2:04:30 Angular 12 : Creamos un nuevo component CartComponent
• 2:14:50 Angular 12 : ¿Qué es el Change Detection en Angular?
• 2:16:30 Angular 12 : Creamos el módulo de Checkout
• 2:18:30 Angular 12 : Creamos el formulario con Angular Material para nuestro checkout Template driven form
• 2:41:51 Angular 12 : Modificamos el header component
• 2:49:30 Angular 12 : Hacemos un redirect a la página de productos
• 2:51:01 Angular 12 : Trabajamos con el details de nuestro pedido, en la página de checkout
• 2:59:15 Angular 12 : Utilizamos los observables del ShoppingCartService (cart$ y total$)
• 3:01:30 Angular 12 : Renderizamos en el html los observables cart$ y total$
• 3:05:00 Angular 12 : Refactorizamos el ShoppingCartService usamos BehaviourSubject
• 3:08:13 Angular 12 : Refactorizamos metodos de el ShoppingCartService
• 3:14:50 Angular 12 : Trabajamos con el Template driven form
• 3:18:11 Angular 12 : Recuperamos las tiendas
• 3:21:40 Angular 12 : Creamos las interface Store
• 3:23:12 Angular 12 : Trabajamos en el checkout modulo para renderizar las Stores.
• 3:27:28 Angular 12 : Mostramos ocultamos recoger en tienda
• 3:32:30 Angular 12 : Guardamos Formulario
• 3:34:50 Angular 12 : Creamos el método saveOrder en el data service
• 3:37:25 Angular 12 : Creamos el método DetailsOrder en el data service
• 3:38:50 Angular 12 : Creamos las Order Interface - (Details, Order, DetailsOrder)
• 3:43:25 Angular 12 : LLamamos a nuestro método del service desde el checkout
• 3:51:04 Angular 12 : Creamos el método prepareDetails
• 3:52:30 Angular 12 : Creamos el método getDataCart
• 4:04:50 Angular 12 : Creamos thank you page module
• 4:08:30 Angular 12 : Creamos ResetCart()
• 4:14:38 Angular 12 : Deshabilitamos el buton add to cart si no hay stock
• 4:16:29 Angular 12 : Gestionamos el stock de productos
• 4:24:25 Angular 12 : Estilos y maquetación para la thank you page
• 4:31:30 Angular 12 : Verificar si el carrito está vacio y redirigir a la página de productos
• 4:31:30 Angular 12 : Despedida

Empezar el Curso en Youtube

• Quiero aprender Angular 12

Prerrequisitos

Angular requiere una versión LTS activa o LTS en mantenimiento de Node.js.

Te recomiendo como editor de códigos Visual studio code, pero puedes utilizar cualquiera.

Estar familiarizado con:

• HTML
• CSS
• JavaScript
• TypeScript - (no obligatorio)

Server de desarrollo

Una vez clonado este repositorio, debe instalar las dependencias.

1. npm install
2. cd curso-angular-12

Ejecute el backend

3. npm run serverAPI

Front-end

4. ng serve Ahora abres tu navegador y visita http://localhost:4200/. La aplicación se recargará automáticamente si cambia alguno de los archivos de origen.

Build

Ejecuta ng build para generar el proyecto. Los ficheros generados estarán en la carpeta dist/.