Introducción a Angular y Fundamentos
Desarrollo de Aplicaciones Modernas con Angular
Creando tu primer proyecto en Angular
Creación de componentes y rutas en Angular para gestión de tareas
String Interpolation en Angular: Transmisión de Datos a Templates
Modificación de Propiedades HTML con Angular: Property Binding
Eventos en Angular: click, doble click y cambio de input
Eventos de Teclado en JavaScript: Uso de KeyDown y Change
Reactividad Granular con Signals en Angular
Reactividad en HTML: Implementación de Signals en JavaScript
Estructuras de control en Angular
Estructuras de Control y Renderizado Dinámico en Angular
Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
Actualización de tareas con Angular y programación inmutable
Uso de ngIf y ngFor para control de flujos en Angular
Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
Manejo Avanzado de Formularios Reactivos en Angular
Validaciones de Inputs en Formularios Reactivos con Angular
Alistando tu aplicación para producción
Validación de formularios y estilos dinámicos en Angular
Activación dinámica de clases en Angular con validaciones
Edición de Tareas Dinámicas en Aplicaciones Web
Estados Computados en Programación Reactiva con Signals
Persistencia de Tareas con LocalStorage en Angular
Compilación y Optimización de Aplicaciones Angular para Producción
Lanzamiento de Aplicaciones con Fiverr Hosting y Angular
Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
Sintaxis y rendimiento de for y switch en JavaScript moderno
Migración Automática a Nueva Sintaxis de Angular
Componentes Reutilizables y Comunicación
Creación de Tienda en Línea con Angular y Tailwind CSS
Creación y Organización de Componentes en Angular
Componentes Reutilizables en Angular: Creación y Maquetado de Productos
Uso de Angular DevTools para Debugging en Angular
Inputs en Angular: Comunicación de Datos entre Componentes
Outputs en Angular: Comunicación del Hijo al Padre
Maquetación de Galería de Productos con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes en Angular
Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
Ciclo de Vida de Componentes en Angular: Eventos Clave
Detección de Cambios en Inputs con ngOnChange en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular
Creación de un Reproductor de Audio con WaveSurfer.js en Angular
Mejoras de la página About en e-commerce: audio y contador dinámico
Mejorando la interfaz del producto
Componentización y Manejo de Datos en Angular
Creación de Headers en Páginas Web con Angular
Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
Implementación de Reactividad en Carrito de Compras con Angular
Gestión de Carrito de Compras en Angular con ngOnChanges
Gestión de Estado en Angular: Solución al InputDrilling
Gestión de Estado Global en Angular con Servicios y Señales
Inyección de Dependencias en Angular: Conceptos y Prácticas
Integración y Datos
Conexión de Angular a REST API usando Fake Store API de Platzi
Creación de Alias para Imports Cortos en Proyectos JavaScript
Transformación de Datos con Pipes en Angular
Creación y uso de pipes personalizados en Angular
Manipulación de Fechas en Angular con Date Functions
Manipulación del DOM con Directivas en Angular
Deployment de Aplicaciones Angular en Vercel
Enrutamiento y Navegación
Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
Implementación de Router Link en Angular para SPA eficiente
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
Uso de RouterLinkActive en Angular para Navegación Activa
Routing en Angular: Creación de Páginas de Detalle de Producto
Consulta dinámica de detalles de producto con Angular y REST API
Galería de Productos Dinámica con Angular y TypeScript
Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en E-commerce
Filtros de Productos con Query Params en Angular
Optimización de Aplicaciones con Lazy Loading y Code Splitting
Optimización de JavaScript en Angular con Lazy Loading
Optimización de Carga de Chunks con Preloading en Angular
Migración de Angular a Nueva Sintaxis con ng generate
Despliegue de Aplicaciones con Verzal en Entornos Productivos
Desarrollo de Aplicaciones Modernas con Angular
1/71Angular es uno de los frameworks más poderosos de la industria para el desarrollo de aplicaciones modernas, ampliamente reconocido y utilizado por gigantes como Google, ClickUp y Samsung. Su enfoque en la estructura sólida y las buenas prácticas asegura aplicaciones de alto rendimiento, algo muy valorado en el mundo empresarial. Por eso, aprender Angular es un paso decidido hacia una carrera próspera en el desarrollo de software. Este curso te guiará desde los fundamentos hasta proyectos complejos, como una aplicación de gestión de tareas y la landing page de un e-commerce, aptos para impulsar tu portafolio profesional. Nicolás Molina, un experto con más de 10 años de trayectoria respaldada por reconocimientos de Google, Microsoft y Ionic, te acompañará en el trayecto a dominar este robusto framework.
¿Qué proyectos podrás crear con Angular en este curso?
Este curso te proporciona una oportunidad única para adentrarte en el mundo de Angular, iniciando con dos proyectos concretos:
- ToDoApp: esta aplicación de gestión de tareas te introducirá al nuevo modelo de reactividad basado en Signals y la sintaxis más actual de Angular. Además, aprenderás sobre la persistencia de datos.
- Landing Page de un e-commerce: aquí desarrollarás habilidades para crear una página con carrito de compras y filtros por categorías, lo que sin duda enriquecerá tu portafolio y te preparará para futuras entrevistas laborales.
Con estos proyectos, construirás una base sólida y práctica en Angular.
¿Cómo iniciar tu primer proyecto en Angular?
Daremos los primeros pasos para crear tu primer proyecto en Angular con las siguientes instrucciones:
- Instalación de Angular CLI: Abre la terminal y ejecuta
npm i -g @angular/cli, asegurándote de tener una versión de Node.js actualizada, preferentemente un LTS. - Creación del proyecto: Con
ng new todo-app --skip-tests, iniciarás tu proyecto sin preocuparte por las pruebas unitarias. - Configuraciones iniciales: Selecciona CSS como preprocesador o el de tu preferencia, y decide sobre el server side rendering.
Una vez completado, tendrás una carpeta con el proyecto listo para ser explorado y editado con tu editor de código favorito.
¿Cómo dar vida a tu aplicación Angular?
El curso sigue con pasos interactivos para dar vida a tu aplicación:
- Configurar el Template: Inicia modificando la plantilla HTML con un mensaje de bienvenida y comienza la ejecución del proyecto con
ng servepara ver los cambios en tiempo real. - Introducción a la lógica de negocios: Aprendes cómo conectar tu componente de Angular con el HTML manipulando variables y estructuras de control como
ngForpara listas dinámicas.
Con estas bases, estarás listo para expandir tu conocimiento e iniciar proyectos más complejos.
¿Cuál es el futuro de Angular y cómo se manejarán las sintaxis?
- Sintaxis antigua vs. nueva de Angular: Te familiarizarás tanto con la legada como con la nueva propuesta, importante para trabajos actuales y futuros.
- Adaptación a proyectos legacy: Emplearás ambas sintaxis para estar listo para mantener y actualizar proyectos existentes.
Angular sigue evolucionando, y este curso te mantendrá al día con los últimos cambios y mejores prácticas del framework.
Este viaje que emprendemos juntos a través de Angular no solo potenciará tus habilidades técnicas, sino que también te equipará para afrontar con confianza los desafíos del desarrollo web. Con cada módulo y proyecto, crecerás como desarrollador y darás pasos firmes hacia la maestría en uno de los frameworks más influyentes del momento. Continúa aprendiendo, practicando y nunca dejes de explorar las posibilidades que Angular tiene para ti. ¡El futuro te espera!
Aportes 89
Preguntas 12
Instalar de manera Global
npm i @angular/cli -g
Crear un Nuevo proyecto
ng new todoapp --skip-tests
Entrar a la carpeta
cd todoapp
Ejecutar el proyecto
ng serve
En efecto es angular 🧐
-
@for( task of tasks; track task){
- {{task}} }
Estuve esperando este curso muy ansiosamente desde que lo anunciaron. Me parece excelente ese sonido relajante de fondo 😎. Por cierto la documentación, esta excelente. Me encanto!.
CONSEJOS
De esta forma se abrirá tu proyecto de manera automática y también puedes personalizar tu puerto.
ng serve -o --port=3500
También lo puedes agregar a tus scripts en tu package.json
"scripts": {
"dev": "ng serve -o --port=3500",
},
Las llaves como se mencionan en clase, de esta manera solo tendrías que ejecutar npm run dev
{{ welcome }}
Se conoce como String Interpolation
Me gustó el paisaje sonoro de fondo de esta clase. Refleja la epicidad de esta nueva versión de Angular v17🚀.
Genial Curso de angular 17
Los más rápidos del oeste, grande Platzi ❤️
Excelente curso Nico!! aún no lo empiezo pero ya sé que será un éxito contigo detras de cámara.
Le tengo toda la fe a este curso
- @for (item of tasks; track $index) { \
- {{item}}\ }\
con muchisima expectativa de este nuevo curso
excelente
-
@for( task of tasks; track task){
- {{task}} }
- @for( task of tasks; track task){ \
- {{task}} \ } \
- @for( task of tasks; track task){
- {{task}} }
-
@for( task of tasks; track task){
\
- {{task}} \ } \
hola si ya tienes todo pero la lista no te sañe fijate en que tengas esto en el app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
9 horas de curso con las nuevas versiones de Angular y mi profesor favorito, se celebra🙏
Excelente!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?