Pues, amigo, hoy vamos a aprender Angular desde cero. No sé por qué mucha gente, la gente se pensaba que era broma, que era mentira. No entiendo por qué, no sé, la verdad. No sé por qué, pero no, no, de mentira nada. O sea, la verdad es que iba totalmente en serio. Y nada, quería que a ver si me podías enseñar Angular desde cero aquí en pleno año 2023 casi ya, que vamos a entrar y a ver cómo lo hacíamos.
De una, yo totalmente estoy a disposición de entrarte, introducirte en el mundo de Angular, que veas otra opción. Y eso es muy interesante. Yo también he trabajado con React y Ness, porque hace parte de la industria. Y es interesante ver también cómo la perspectiva de los dos frameworks para desarrollar, solucionar diferentes problemáticas en el mundo del parent.
Así que, así como aprender dos lenguajes es bueno, también mantenerse como con dos frameworks es bastante interesante y, pues, se vuelve más demandable en el mercado laboral. Así que, vámonos de una a aprender Angular.
Vámonos, vámonos. Pues, ya ponemos tu pantalla aquí. Vemos la terminal.
Perfecto. Entonces, aquí les presento a Angular. Angular es un framework que ya lleva bastante tiempo en el mercado y realmente llega, sigue estando entre los tres frameworks más usados. React ya va de primeras. Sin embargo, los frameworks más usados siguen siendo Angular, React y Vue y todos los frameworks encima de ellos.
Pero bien, vamos a estar a, pues, empezar a desarrollarlo. Lo primero que necesitas tener, Midu, para poder crear una aplicación en Angular es algo que se conoce como el CLI o el cliente de comandos de Angular. Ese se instala muy fácil. Te voy a enseñar cómo se instala.
Vale.
Para instalarlo, lo único que debes hacer es tener un ambiente de Node, que eso, pues, es como algo que todos tenemos.
Yo seguro.
Totalmente. Por ejemplo, yo estoy utilizando la versión 18 de Node, que es como ahorita la versión estable, y allí vamos a instalar un paquete de forma global. Entonces, allí vamos a instalar un paquete de forma global, que es el Angular CLI.
Vale.
Una vez hacemos esto, pues, le damos un Enter y esperamos, pues, hacer la debida instalación. Y ya con eso, o con esta herramienta, podemos empezar a, pues, crear aplicaciones en Angular y, sobre todo, a hacer algo que es el, pues,
todo el desarrollo, Angular tiene una de las mejores herramientas de CLI. De por sí no la he visto en otros frameworks, es porque en otros frameworks tenemos como el bootstrapping de la aplicación, como el código base de la aplicación, pero el CLI de Angular va un poco más allá.
Te ayuda a hacer componentes, te ayuda a hacer un poco más de cosas que ahorita vamos a ver.
Bien.
Para verificar que esa instalación haya quedado perfecta, lo único que debes hacer es correr el comando en GVersion.
Y allí, usted dice, ok, ya tienes el Angular CLI, que en este momento está en la versión 15.04.
Vale. A mí me ha hecho una pregunta. Me ha dicho que si quiero activar el autocompletado, que esto me va a no sé qué, no sé cuánto, le digo que sí, ¿no?
Yo, sí a todo, ¿no?
Sí, sí.
De Angular me fío siempre, digo que sí a todo.
Totalmente.
La pantalla es de Nico. Lo que pasa es que lo estoy haciendo yo a la vez para verificar que lo que dice Nico es verdad.
No, para verificar, ¿no? Porque seguro que es verdad.
Pero, hombre, porque me interesa de verdad. O sea, que voy a estar siguiendo.
Recuerda, Angular es respaldado también por Google y Google utiliza mucho a Angular internamente en sus aplicaciones.
Al igual que, por ejemplo, Rida, que es respaldado por Facebook.
Ok.
Vale.
Entonces, si ya tenemos, pues, nuestro CLI instalado, vas a ubicarte en el espacio personal, en tu carpeta en la cual estés desarrollando proyectos.
En mi caso, por ejemplo, normalmente tengo una carpeta llamada personal, pues, para hacer mis proyectos personales.
Y allí vamos a crear un primer proyecto.
Para eso, vamos a darle el comando ng new.
Y listo.
Y normalmente, directamente podríamos darle el nombre que queremos de nuestra aplicación.
Por ejemplo, le voy a llamar midu.
Me gusta el nombre.
Pered app. Así, la aplicación de midu.
Listo. Ok.
Entonces, vamos a darle un enter.
Y aquí ya me empieza a hacer alguna serie de preguntas.
Porque Angular, algo que tiene muy interesante, es que, como es un framework, ya viene con cosas ya solucionadas.
Por ejemplo, ya tiene un sistema de routing, como el Angular routing, que en React, por ejemplo, pues, tenemos, no hace parte oficial de la librería, sino que tenemos, por ejemplo, el React router, que es parte de otra compañía.
Sin embargo, Nest, por ejemplo, ya, pues, ya viene incorporado.
Ok.
Entonces, aquí le vamos a decir, si yo quiero una aplicación que tenga routing, normalmente todas las aplicaciones tienen routing, así que le vamos a decir que sí.
Vale.
Me dice, si yo quiero hacer mi código de estilo en CSS o en SAS, entonces aquí le voy a decir que esté en CSS.
O sea, que es culpa de Angular que todavía se esté hablando de LES.
A ver si lo quitan.
A ver si quitan LES.
Mira, otro que quiere aprender Angular.
Pues, la gente pregunta, ¿se puede utilizar Tailwind con Angular? Porque a mí si no me ha matado aquí ya, eh.
Sí, totalmente. Ahorita, si quieren, podemos explorar cómo instalar Tailwind o incorporar Tailwind dentro de Angular.
Y ya ahí realmente no está un poco tan complejo.
Vale.
Y Tailwind es una gran, gran, gran herramienta.
Pues, elige lo que tú quieras. Si quieres con CSS y si quieres luego le ponemos el Tailwind.
Aquí lo que mencionabas, a LES casi ya no se le quiere mucho.
Sin embargo, Angular lo soporta. O sea, no hay problema, él lo soporta dentro de su proceso.
Pero nosotros podríamos tener SASS o CSS directamente.
O escoger CSS para no elegir ningún preprocesador.
Y listo.
Con eso, ya tendríamos precisamente el Boyplate de nuestra aplicación.
Angular ya crea como una arquitectura por defecto.
Y, pues, empieza a hacer la instalación de dependencias.
Entonces, pues, allí nos va a crear unos archivos muy similar, por ejemplo, a si han creado aplicaciones con NES o con Google.
Pues, ya te crea un Boyplate de código por defecto, ¿no?
Con todo lo necesario para iniciar a desarrollar.
Entonces, aquí vamos a esperar aquí solo a, pues, a que se termine el proceso de instalación de dependencias.
Y empezamos a desarrollar.
Hoy quisiera, pues, hacerlo más común dentro de una aplicación.
Pero de pronto, bueno, nosotros estamos aprendiendo qué es hacer la conexión a una API, renderizarla.
Y los retos que tú me quieras colocar, mío, también son las cosas.
Los retos a saco, ¿eh?
No, hombre, sin retos, sin retos. Normal, normal.
Calma. O sea, easy, easy, que estamos de introducción.
Lista.
Entonces, la API a la que me voy a conectar es esta.
Se llama Platzi Fake Store API.
Es una API que nos da, pues, productos random para simular el API de un e-commerce.
Entonces, por ejemplo, si yo hago un request tipo get a este endpoint, me va a devolver unos 200 productos, etcétera, etcétera.
Y, pues, tengo categorías, tengo usuarios, en fin.
Ahí les dejo esta documentación, que también es un recurso creado por Platzi, para que empecemos a experimentar.
Y solo como spoiler alert, y este es un spoiler que ni siquiera lo, bueno, que no lo he dicho todavía en Platzi oficialmente.
Dilo, dilo, aquí, exclusivas, exclusivas, Nico, exclusivas.
Hace poco, digamos, el soporte a GradQuel para que dentro de esta API también podamos explorar y hacer GradQuel aquí.
¡Bravo!
Por ejemplo.
¡Qué bueno!
Perfecto.
Entonces, por ejemplo, también pueden consultar esta API utilizando GradQuel.
Y, bueno, y eso nos abre un montón de experimentos y cosas que podemos hacer así, pues, con la aplicación y divertirnos un poco, pues, haciendo una aplicación lo más parecido a lo que nos enfrentaríamos en el mundo real.
¡Buenísimo!
¡Listo!
Aquí ya está nuestra aplicación.
Vamos a entrar.
El que crea Angular te crea un folder.
Entonces, vamos a ir al folder Me to the Bab.
Ahí está.
Y lo primero que vamos a hacer, pues, podríamos abrir el código.
Yo voy a utilizar Visual Studio Code.
Entonces, allí ya me abre el código.
Ahí ya está cargando.
Voy a hacerle un poquito más de zoom para que todo se vea perfecto.
Y aquí ya tenemos, pues, el proyecto base.
Sin embargo, lo que podemos hacer es correr un comando que es de Angular.
Pueden correr un npm start para correr nuestro desarrollo.
O él tiene el comando ng-sherp.
Y lo que te levanta es un entorno de desarrollo, pues, para producir y para empezar a generar, pues, el bonde de la aplicación.
Este es de modo de desarrollo.
Luego hay un paso, pues, ya para llevarlo a producción.
Pues, muy similar a los frameworks de hoy en día.
Entonces, por ejemplo, aquí ya te dice, mira, tienes un hola mundo en Angular.
Es más, tu nombre está aquí.
Mira, mi nombre al lado de Angular.
Vamos.
Me encanta.
Esto va bien.
Esto va bien.
Bien, bien.
Entonces, aquí él te da como un Hello World de Angular.
De una vez que te pone aquí como documentación, él tiene una implementación directa de Angular Material, que, pues, Material es el lenguaje de diseño de Google y tiene una implementación y soporte directo hacia Angular.
Bueno, y cómo agregar una PWA, cómo hacer server-server rendering, en fin, todo lo tienes aquí en este Hello World.
Pero vamos a borrar ese código que nos entrega por defecto y, pues, hacer precisamente una aplicación que se conecte a esa API.
Me gusta.
Entonces, vamos a introducirnos al código.
Lo que vas a encontrar es una carpeta llamada app que tiene algo sencillo.
Es decir, tiene algo llamado...
Sencillo, Nico, Nico.
Ahí veo muchos archivos.
No me digas sencillo, que ya he visto siete archivos ahí.
Listo, perfecto, perfecto.
Está bien, está bien.
Entonces, Angular tiene algo llamado programación modular.
Es en donde empieza a encapsular ciertos bloques de código como tal.
Y normalmente viene de toda la programación orientada a objetos y normalmente empezamos a hacer módulos por diferentes dominios de la aplicación.
Por ejemplo, habrás escuchado cosas como tengo el módulo de ventas y el módulo de compras y entonces empezamos a dividir como la aplicación por dominios.
A eso es lo que nos ayuda en Angular, conocemos como un módulo.
Lo otro ya es un poco más sencillo y es lo que ya consideramos más estándar en la industria, que son los componentes.
Un componente es algo más sencillo que, pues, tiene una representación en el HTML.
Ahorita vamos a hacer un componente, por ejemplo, para crear un producto o para renderizar un producto como tal.
Vale, una cosa que veo ya así de primeras es, uno, que utiliza TypeScript, o sea, utiliza TypeScript.
O sea, no es TypeScript.
No había una configuración de decir, no, no, no.
Es TypeScript y que utiliza muchos decoradores.
Totalmente.
De por sí, Angular fue uno de los primeros que creyó como proyecto en TypeScript.
Antes de que se volviera mainstream y todo el mundo dijera, ah, sí, TypeScript es chévere.
Angular desde el día cero, desde que empezó a realizar como esta nueva versión,
apoyó TypeScript y por allí en un blog Microsoft dice como, muchas gracias, Angular,
porque fue, gracias a ellos tuvimos el apoyo que necesitábamos en las etapas iniciales.
Ahorita TypeScript es como el común denominador, ¿no?
Como en React, en Vue, hasta en Express, por ejemplo, para hacer backend, también tenemos a TypeScript.
Así que sí, no es una opción.
Es como, ajá, tú desarrollas ya directamente con TypeScript y aquí no va a haber JavaScript puro, es solo TypeScript.
Vale.
Listo.
Entonces, fíjate, por ejemplo, que aquí sí hay algo que cambia, sobre todo si viene el mundo de React,
y es que no tenemos como la parte, como lo hace React o la nomenclatura que utiliza React, que es JSX,
o si estás utilizando TypeScript, JSX, que es donde yo tengo como el HTML y la lógica del componente en un mismo archivo.
Bueno, aquí normalmente lo que hacemos sí es separar esta parte.
Tenemos esta clase que viene de programación orientada a objetos, tenemos una clase,
y aquí vamos a tener toda la lógica, pero en otro archivo vamos a tener el HTML.
Y de por sí este es el HTML que se está mostrando, que tiene el Hello World y tiene todo bonito.
Ese es el que se está mostrando.
Bueno, y es pues un HTML, pues, normal, el de toda la vida, un toolbar, un welcome,
que ahorita lo vamos a borrar y empezar a ver cómo creamos nuestra propia aplicación.
Vale, Nico, me vas a llamar troll, ¿vale?
Pero, ¿por qué hay un .html lleno de CSS y hay otro archivo .css?
Eso me ha puesto un poco nervioso.
Ok, ok, ok, perfecto.
¿Y ya te vas a dar archivo?
Medato, Medato, Medato.
Este archivo CSS está vacío por defecto.
Normalmente aquí ya te incluyeron el CSS dentro del HTML.
Sin embargo, dentro de Angular, realmente aquí podemos tener varios estilos,
aunque el estilo oficial normalmente es tenerlo como en cosas separadas.
Y el archivo o los estilos deberían normalmente estar en el CSS,
pero aquí en el Hello World, como para no complicar las cosas en Angular,
te lo muestran aquí en el Hello World.
Pero normalmente en una aplicación profesional, si vamos a ver,
pues que todas las cositas van un poco, pues, separadas, ¿no?
Como que tengo el estilo de este componente y el HTML de este componente
y lo que ya representa la lógica de mi componente como tal.
Listo.
Listo.
Entonces, de por sí vamos a hacer eso.
Vamos a borrar todo esto porque, pues, no lo quiero.
Entonces, ya no tenemos estilos ahí dentro,
sino que vamos a escribir por acá un hola.
¿Bien?
Algo.
Sin embargo, vamos a hacer lo primero que nosotros nos enseñan en un framework
y es cómo yo represento y hago enlace de datos.
Entonces, fíjate que acá yo tengo algo llamado title,
que tiene, pues, el nombre de mi aplicación.
Listo.
Esto sería como las props, o sea,
como los atributos o propiedades que se les pasa al componente.
Exactamente.
Entonces, este, este ya por defecto,
yo puedo enviarlo hacia, acá, hola.
Y acá tenemos el doble, que no sé cómo tú lo conoces,
yo realmente este nombre, doble corchete, breakers.
Sé que le llaman curly braces.
Curly, es.
Pero yo le llamo llaves.
Y ya está.
Vamos a llamarlo llaves.
Yo a veces le llamo corchetes.
Bueno, en fin, ya, ya.
Corchete excursiva.
Corchete concursiva.
Exacto.
Mira, aquí le dicen mustache, doble bigote.
Qué bueno.
Ok, ok.
Listo.
Entonces, vamos a utilizar la doble llave para representar ese valor en el HTML.
Entonces, aquí, por ejemplo, acá ya tenemos ese valor representado, ¿no?
Hola.
Y, pues, el valor que tenemos allí representado.
Ahora, esto es interesante porque, no me dejarás mentir,
por ejemplo, para cambiar un valor o el estado de un valor en React,
normalmente tenemos que utilizar useState y decirle como,
yo quiero cambiar el nombre de ese valor.
Entonces, vamos a hacer un ejemplo.
Voy a poner un método llamado shameTitle.
Y, sí, ahí está bien escrito.
Y vamos a decirle que ahora title va a ser igual a, pues, un cambio, ¿no?
Entonces, vamos a decirle shink.
Listo.
Ese va a ser, o shame, ahí está.
Listo.
Entonces, tenemos un método y aquí yo no tengo que utilizar un useState
o, pues, preocuparme un poco por cómo yo muto ese valor,
sino que directamente es algo que en JavaScript es normal.
Tengo un valor, modifico el valor de esa variable.
Entonces, lo tengo así por medio de un método.
¿Así es fácil?
Oye, muy bien, ¿eh?
Q2, Q2 Angular.
Me ha gustado esto, ¿eh?
Listo.
Ahora vamos a ejecutar esa función.
Allí es donde tendríamos un buron y vamos a hacer acá un cambio.
Como yo ejecuto ese cambio, normalmente, pues, tengo un evento,
que es el evento click, y entonces le envío la función.
Aquí sí es muy parecido a, por ejemplo, a React,
donde tenemos un onclick y, pues, ejecuto la función.
Vale.
Un momento aquí.
Un momento.
Vamos por partes.
Porque el change title, ¿ha tenido un autocomplete o no?
O sea, sí que ha tenido autocomplete, ¿no?
Lo ha detectado.
¿Cómo ha funcionado esto?
Esto es con algún tipo de extensión, me imagino, ¿no?
Porque...
Sí y no.
O sea, aquí tengo un copilot, básicamente, que está aquí activado
y me está autocompletando cositas.
Ah, vale.
O sea, no ha sido el autocompletado con el...
O sea, no ha habido un autocompletado de saber qué métodos tiene la clase,
sino que ha sido el copilot que trae detectado y ya está.
Ajá.
O sea, hay dos cosas.
Creo que debería desactivarlo.
No, no, está bien, está bien.
Déjalo, hombre.
Si todos vivimos con copilot, nos tenemos que aceptar.
O sea, todos tenemos que...
Dos tutoriales ya tienen que ser con copilot,
porque todo el mundo lo está usando.
Vale, lo digo porque, claro, como he visto que has puesto un string,
digo, ostras, qué difícil va a ser si pones un string,
saber el nombre del método y ponerlo manualmente.
Pero, claro, no...
Me imagino que sí que habrá un autocompletado igualmente.
Sí.
Realmente, por ejemplo, Angular tiene una extensión llamada
Angular Language Service.
Esta extensión, si tú eres desarrollador de Angular,
deberías tenerla dentro de tu Visual Studio Code.
Y esta sí utiliza, aparte de que, pues, ya utilizamos TypeScript,
él utiliza todo el autocompletado, por ejemplo, para decir,
oye, esto, pues, no es una función, esto no se encuentra.
Fíjate que aquí esto no es copilot diciéndome algo.
Esto es Angular diciéndome, hey,
esa función no existe dentro de ese componente.
Y esto hace parte de las herramientas de desarrollo.
Ahí está.
Por ejemplo...
Perfecto.
O sea, que la extensión es la que está haciendo el autocompletado y tal.
Vale, perfecto.
O sea, menos mal.
Es que si no me había asustado, pues, digo,
ostras, cuando he puesto el string, digo,
¿cómo va a detectar ahora con un string?
O sea, ahora es fácil.
Pero imagínate que tienes componentes y que no te acuerdas de los...
Pero vale, ahora entiendo que con la extensión hace la magia.
Exacto.
Y esa extensión es de nuevo una extensión oficial del equipo.
Voy a hablar que nos ayuda, pues,
a toda la developer experience, pues,
desarrollando con este framework.
Vale.
Listo.
Entonces, vamos a ver cómo queda.
Entonces, fíjate que entonces yo tengo el shank
y aquí, pues, simplemente ya hubo el data binding,
el enlace de datos en donde yo hice un cambio
y se representó, pues, en mi HTML.
Y ya.
Y aquí no tuve que hacer mucho para lograr esto.
Simplemente, pues, un método que hace ese ajuste,
ese cambio y ejecuté ese cambio gracias, pues,
a incorporar ese método allí.
Entonces, ahí ya tenemos algo súper interesante
con unas pocas líneas de código
y empezamos a ver cómo es que funciona Angular.
¿Qué tal?
¿Cómo lo ves ahí?
Pues, a ver, tengo que decir que me ha gustado mucho
lo del estado.
Lo del estado me ha encantado.
El hecho de que sea totalmente reactivo
sin tener que hacer absolutamente nada.
No soy muy fan de la sintaxis.
O sea, ese clic entre paréntesis y...
Bueno, ese, esa...
La interpolación me gusta.
Son dos llaves, eso lo entiende todo el mundo.
Pero, hostia, lo del clic ahí entre paréntesis
me tengo que habituar.
Me tengo que habituar.
Y también me es raro el hecho de que el change title
lo está ejecutando ya.
Claro, eso es diferente a como es en React, ¿no?
Porque en React se pasa la referencia a la función
y no la ejecución de la...
Exacto.
Pero, pero bueno, es cuestión de acostumbrarse.
Perfecto, perfecto.
Sí, sí, sí, tienes toda la razón.
Uno normalmente ya empieza a hablar de diferencias de sintaxis,
pero bien, todo perfecto.
Pero bien, bien, me gusta.
Listo.
Entonces, vamos a desarrollar un componente
que es como lo más habitual.
Quiero desarrollar un componente producto
que se encargue, pues, de la renderización
de un producto como tal
y luego, pues, hacer la llamada a una API,
que es esta que les estaba mostrando hace poco,
y hacer el render.
Entonces, ¿cómo funcionan los componentes en Angular?
Pues, normalmente, por ejemplo, en React
tienes que ir y crear tu componente
que al final normalmente es solo un archivo,
así que tampoco es algo como tan complejo.
Pero en Angular entonces tenemos un comando
que es para generar componentes.
Y el YATK crea un boilerplate
no solo con el componente,
sino también con algo que son buenas prácticas
y un archivo para incluir pruebas por defecto.
Nosotros deberíamos, en la mayoría de casos,
pues, hacer unit testing
y el YATK incluye como el boilerplate
para hacer unit testing.
Entonces, vamos a correr el comando
ng, g, de generate,
esa es la palabra de generar,
y la c de componente.
Y listo.
Y le digo en dónde quiero ese componente.
Normalmente se crea una carpeta llamada components
y voy a decirle que
pues, quiero generar un componente llamado product.
Y le tienes que pasar como el path completo y todo.
O sea, dices dentro de la carpeta components
el product, ¿vale?
Ajá, exactamente.
Y allí fíjate que me creo archivo CSS,
archivo HTML,
un archivo spec,
que sería el archivo de nuestras pruebas unitarias,
y nuestro archivo que se va a encargar
de la lógica de negocio,
que es el TypeScript.
Y ha actualizado el módulo.
Importante.
Ah, exacto.
Lo bueno es que lo hace automáticamente.
Porque antes estaba pensando,
anda, que esto si hay que hacerlo manualmente,
pero vale, ya veo que lo ha hecho automáticamente
cuando lo generas.
Exactamente.
Ya normalmente el CLI de Angular
ya no se hace muchas cosas automáticas.
Entonces simplemente lo empezamos a usar
como parte de los skills de desarrollo.
Entonces aquí tenemos precisamente
un product component
con un HTML,
un CSS que está vacío por defecto.
Igual, por ejemplo,
si tú desarrollas con Tailwind,
normalmente ya no haces tanto CSS
porque solo utilizas las utilidades de Tailwind.
Entonces podrías presenciarte el archivo, ¿no?
Y ya, y no hay problema.
Entonces no es obligatorio tener archivos CSS,
simplemente lo quitas
si es que realmente no estás utilizando
un estilo para ese componente.
Vale.
Ok.
Listo.
Entonces vamos a hacer algo muy interesante
que en React reconocen mucho,
que son los prompts.
Es decir,
cómo yo envío datos a ese componente.
Y cómo empiezo a comunicarme
como de padre a hijo, ¿no?
Entonces, por ejemplo,
nuestro componente,
pues va a recibir un producto.
Y aquí es donde yo puedo empezar
a utilizar typing.
Y por aquí me puedo crear una interfaz.
Ahí sí voy a crear esta interfaz
como un poco manual.
Voy a poner acá a llamar models.
Y voy a decirle
que quiero un archivo llamado
product.model.typescript.
lo voy a declarar
como una interfaz.
Y esto solo para declarar
pues cuáles son los atributos
esperados de un producto.
Entonces acá, por ejemplo,
pues tengo un ID.
Normalmente debería tener un cycle.
Es un string.
Tengo un precio,
que es un number.
Y tengo unas imágenes,
que son las que pues vamos a mostrar.
Sin embargo,
las imágenes
van a venir como un array.
¿Por qué?
Porque es un producto.
Tiene varias como fotitos.
Entonces va a venir
como un array de strings.
¿Ok?
Con eso tenemos lo suficiente.
Vale.
Ok.
Allí entonces es donde
vamos a decirle
a nuestro componente
que vamos a recibir
esa información.
En Angular
tenemos un concepto
llamado input.
Y vamos a hacer
un input chiquito
como para
para llevarnos la idea.
Entonces vamos a
incorporar
aquí poner
un input
del input
y con un decorador
vamos a poner
input.
Le pongo
el nombre del input.
Por ejemplo,
yo quiero
el título
del input.
Y le digo
de qué tipo es.
Entonces acá
tengo string.
Listo.
Punto y coma.
Listo.
Por ejemplo,
aquí me dice
algo muy interesante.
y Angular
siempre va a optar
por las mejores
prácticas por ti.
Dice,
ok,
que tengas un title
pero igual que pasa
en realidad
cada vez que queremos
definir un valor
nos dice,
oye,
inicializa un valor.
En useState
tienes que siempre
pasarle normalmente
un valor por defecto.
Entonces él te dice,
oye,
inicializa ese valor
porque es chévere
y produce mucho menos
errores inicializar
ese valor.
Como es un string
que lo voy a inicializar
pues como un string
en vacío
y ya.
Listo.
Entonces quédate
que el mismo Angular
te va diciendo,
oye,
pues ve haciendo
buenas prácticas
e inicialízalo.
Ok,
entonces,
¿cómo hacemos
para enviar
esa información
y renderizar
el título?
Entonces,
aquí haríamos
la misma práctica,
o sea,
por ejemplo,
yo utilizaría
un H1
y pues renderizaríamos
el título
que tenemos allí.
Uy,
ahí se me fue
un typo.
Ahí está.
Listo.
Listo.
Ahí,
retiramos un poquito,
vamos a revisar
un poco
que hemos hecho.
Simplemente
tenemos un nuevo
componente
que recibe algo
que es un input,
es decir,
va a recibir un title
y queremos renderizarlo.
¿Cómo utilizamos
este componente?
Pues ya podríamos
ir a nuestra aplicación
que pues es como
la aplicación
grande
o el componente
padre
y vamos a
crear
o distanciar
ese componente.
Fíjate que el componente
tiene algo
que es un selector
que es appproduct.
Sí,
que eso me estaba preguntando
qué es,
pero digo,
no lo voy a preguntarle
al pobre Nico
porque si no,
lo voy a romper
el hilo mental.
Pero estaba poniéndome
nervioso,
pero digo,
¿y para qué es ese selector?
¿Para el CSS?
Exacto.
Ese selector
es la forma
en que nosotros
vamos a llamarlo
como un componente
más de HTML.
Por ejemplo,
pues es un H1,
un Buront,
pues ahora vamos a llamar
a nuestro componente
que se llama
appproduct.
Lo vamos a renderizar
y aquí entonces
él recibe un título
y pues yo le digo
este es el título.
Entonces quiere decir
que mi componente
ya está recibiendo algo,
está recibiendo
lo que nosotros
consideramos un input
o lo que en realidad
se considera un prompt,
¿no?
Y vamos a ver
cómo,
vamos a ver,
creo que aquí
había detenido
mi ng-serve,
vamos a volverlo a levantar.
Ahí entonces
se está levantando
de nuevo,
lo habíamos detenido
para crear nuestro componente,
pero entonces
vamos a recargar
y listo.
Fíjate que acá
ya está el título
y si tú te fijas
hay una extensión oficial
que es la Angular
de Tools
que sería chévere
si se la descargan.
Ostras,
es la misma
que la de React,
o sea,
es la misma.
No sé quién se ha copiado
de quién,
no es una juzga,
o sea,
quiero decir
que es la misma.
Ajá,
que te permite,
sí,
realmente la experiencia
es la misma
que permite
empezar a debuggear
y decir,
ah,
mira,
tengo un componente
llamado
app product
que tiene un input
que pues
ahí lo puedes cambiar.
Acá puedes empezar
a jugar
con el componente
y demás,
¿no?
Entonces,
fíjate que acá
ya recibimos
ese título
y pues podemos
ya enviar más cosas.
Sin embargo,
algo que también
podemos hacer
es no recibir
pues ya
un
como
input por input
como el título
y la imagen
y el precio,
sino que yo puedo
recibir directamente
un
la interfaz,
¿no?
El producto.
Claro,
porque,
claro,
digo,
¿para qué hemos creado
la interfaz?
Porque,
claro,
podemos hacer un input
de todo el producto.
Exactamente,
eso es lo que vamos a hacer ahora.
Entonces,
como ya hicimos
esa interfaz,
pues voy a importarla
desde pues donde esté
el directorio de carpetas.
Entonces,
por acá me salgo
y por acá tengo mis modelos
y acá tengo product font.
Perfecto,
entonces le digo,
ok,
yo quiero la interfaz
que representa
los valores de un producto,
creo que no la he exportado.
Vamos a ver,
aquí se me olvidó mi export.
Perdón,
no estaba atento,
como copilot,
yo mal,
no me fijaba ahí,
muy mal,
mal por mí.
No te preocupes,
pero fíjate que
seguimos utilizando
las novedades
pues que ya son comunes
en JavaScript
es utilizar el export,
el import,
etcétera,
y entonces como ya
le puse
allí el export,
pues acá tengo el pollo.
Visto,
entonces ahora le puedo decir
pues no tengo
solo
pues un input
en específico,
sino pues esto
va a recibir
todo un producto
y pues entonces
acá ya tengo
un typing.
Acá
existen dos cosas.
Y ahora
cómo le haces
un valor inicial
porque tiene que ser
un objeto complejo,
¿no?
Exactamente,
eso es bastante interesante.
Aquí
tienes dos opciones,
una es realmente
le mandas
un objeto
con algún valor inicial,
es decir,
tendrías que enviarle,
no sé,
un title
en vacío,
un price,
bueno,
digamos que le mandas
todo en un valor inicial,
de nuevo,
esto es una
muy buena práctica,
en teoría
Redox
se basa en esto,
de tener un estado
por defecto,
por ejemplo,
le damos
emails
y un ID
que por ahorita
no me acuerdo
si es un número,
ahí está,
y ahí ya no te molestaría,
pero tienes un estado
inicial,
esa puede ser una forma,
la otra es utilizar
una característica
de TypeScript
como tal
y decirle,
oye,
no,
no te preocupes por esto,
en algún momento
se lo voy a enviar
y yo utilizo
este signo de admiración
que es,
no me molestes
por inicializarlo,
yo sé que se lo voy a enviar,
yo sé lo que hago,
confía en mí.
Exactamente,
tienes las dos opciones,
una buena práctica
como de inicializarlo
o no te preocupes,
yo voy a enviar un producto,
no te voy a enviar
algo en Define,
no te voy a enviar
algo en Null,
yo te voy a enviar
un producto.
Pero bueno,
tiene sentido
muchas veces
hacerlo así,
¿no?
Porque así puedes hacer
un renderizado condicional
de decir,
bueno,
si no hay producto
que puede ser,
pues renderizas
una cosa diferente.
Normalmente empiezas
a decir,
bueno,
si empiezas a hacer
preguntas,
empiezas a hacer
varias cosas allí
para ver
cómo renderizas
el componente,
pero tienes las dos opciones,
o renderizar un estado
por defecto
o decirle,
como tú dices,
déjame que yo sé
lo que hago.
Listo.
Entonces,
pues listo.
Entonces,
aquí,
fíjate que entonces
tenemos el producto
y ya no tenemos,
pues obviamente,
el title.
Ya ha detectado,
ha detectado
que ya no tenemos
el title.
Exacto.
Muy,
muy,
muy bueno ojo ahí.
Hombre.
Entonces,
aquí ya le diría,
bueno,
listo,
mira,
pues aquí,
en teoría,
yo debería tener
el product title
y tengo que tener,
pues un precio,
entonces voy a ponerle aquí
un precio,
entonces voy a utilizar
el doble llaves
y product.price
y renderizamos la imagen,
entonces la imagen,
aquí fíjate que voy a renderizarlo
de esta manera,
sin este corchete,
y le doy product.emails,
¿no?
¿Qué sería,
pues el valor?
Sin embargo,
normalmente,
o yo prefiero,
normalmente cuando hacemos render
de contenido,
utilizamos las dobles llaves,
pero cuando yo quiero asignar
como un atributo a HTML,
yo prefiero utilizar
esta nomenclatura,
que es decirle,
pues aquí yo encierro
la propiedad
y le digo
que aquí,
pues esto va a ser igual
a product.emails,
y se me hace más limpio,
pero pues las dos formas
funcionan igual,
¿listo?
Sin embargo,
fíjate que images
es un array,
yo normalmente podría hacer,
pues voy a ir
al subcero,
subcero,
que sería la primera imagen.
Sin embargo,
aquí puedo utilizar
un condicional.
Una pregunta,
antes de,
porque,
claro,
si product puede venir vacío,
¿cómo es que ahora,
me imagino que es por lo
de la exclamación
que has puesto,
pero imagínate que viene vacío,
¿no petaría
en intentar acceder
al punto title?
Ajá,
sí,
ahí,
sí,
si ahorita
no hay nada
en product of
y yo le envié
un nulo,
un define,
lo que sea,
esto empezaría
como a tener complicaciones
y me diría,
oye,
estás intentando ingresar
a algún define,
allí podemos utilizar
el optional chaining
de JavaScript
y decirle,
oye,
si hay algo
que puede no venir
o no,
pues entonces
utiliza el optional chaining
o entonces
también podría
decirle,
como tú me mencionabas
ahorita,
por ejemplo,
hacer un contenedor
y decirle,
oye,
esto solo renderízalo
con un ngif
si realmente
hay algo en product,
¿no?
Entonces,
yo esto
lo ingreso
por acá,
por ejemplo,
y por ejemplo
podría tener
un template
como,
no sé,
producto,
bueno,
no sé,
producto no renderizado
o algo así,
no render
y básicamente
sería lo contrario
de,
pues si no hay producto
entonces muéstrame
esto otro
y esa sería
la forma
de solucionarlo,
digamos.
¿Y se podría hacer esto
sin añadir
el elemento deep?
¿Sabes?
Como no crear
otra anidación
totalmente.
Normalmente
tenemos un componente
que no crea
un,
pues algo en HTML
sino que tenemos
algo llamado
un ng-content.
Vale.
Si no estoy mal
es un ng-template
el ng-template
es el utilizado
para que esto
no me genere
pues un,
como un elemento
HTML más
sino que pues
simplemente
se encapsule.
Vale.
O sea que
además hemos aprendido
cómo se hacen los ifes.
Vale.
Genial.
Gracias.
Perdona,
Nico que te cortaba
y era curiosidad.
No te preocupes.
No te preocupes.
Sí,
bien.
Listo.
Entonces,
ok.
Listo.
Entonces tenemos ya
nuestro producto
que en teoría
ya pues renderiza
un título
y vamos a cambiar
esto por un H2
porque ya tenemos
un H1 y SEO.
Entonces vamos a ver.
Entonces listo.
Precio
y la primera imagen.
Listo.
Entonces,
ahora ¿qué nos queda?
Pues ir a nuestro,
a nuestro componente
y acá entonces
empezamos
o ya empezaríamos
a ya no enviar
pues el title
sino que deberíamos
enviar pues producto
y con todo lo que
significa un producto
el título,
etcétera.
Aquí es donde entonces
vamos a hacer
una petición
a la API
y enviar pues un
pues un render
de todo esto.
Entonces primero
vamos a ver
cómo se hacen
las peticiones.
Entonces vamos a ir
por acá
a...
Hostia,
una cosa que me vuela
la cabeza,
Nico,
con el HTML
y las llaves.
Mira,
estabas en el otro HTML
en el de app
el de...
Acá,
listo.
Sí.
Que ahora
para pasarle
un objeto
al product.
O sea,
¿tú le podrías
pasar un objeto
ahí?
Sí,
aquí yo podría
empezar
a pasarle
aquí
el title.
Normalmente
yo puedo empezar
aquí a tener
esta aquí
con title.
Puedo empezar
a pasarle
un producto.
Aunque no es
como lo más...
Sí,
sí,
o sea,
entiendo que no es
lo normal,
pero no sé,
es que como
cuando se ponen
las llaves,
o sea,
las llaves,
las comillas,
que es de un string,
pues como que me vuela
un poco la cabeza
que se puedan poner
dentro de comillas
que serían como un string,
¿sabes?
Pues poner un objeto
y que lo va a entender
y como que me vuela
un poco la cabeza.
Pero,
¿sabes?
Pero vale,
vale,
ahora entiendo
que sí que se puede
y ya está.
Listo,
listo.
Es bastante divertido
realmente
empezar a ver
qué hacen.
A tener que ir cambiando,
exacto,
exacto.
Cambiarle la mentalidad.
Ajá,
ajá.
Ah,
bueno,
ahorita te mencioné
algo más de las imágenes,
pero déjémoslo ahorita
para más adelante.
Sí,
vale.
Listo.
Entonces,
aquí,
en React,
digo,
en Angular,
de nuevo,
es un framework,
entonces normalmente
te trae ya cosas
solucionadas.
Por ejemplo,
él tiene un propio módulo,
una propia forma
para hacer peticiones
hacia una API
o para conectarnos
por el protocolo
HTTP.
Muy similar,
por ejemplo,
a Ness,
que ya tiene,
bueno,
Ness no tiene uno
por defecto,
él utiliza Fetch,
pero sí tiene una,
esta librería
de hooks,
de...
Sí,
React Query
o SWR.
Esa,
que es como que
la que él oficialmente
también ha desarrollado
para hacer peticiones
y hacer peticiones
desde el lado del cliente.
Entonces,
en Angular pasa igual,
él tiene como una,
un paquete oficial
para hacer,
pues,
este tipo de llamados.
Sin embargo,
vamos a tener que habilitarlo.
cómo habilitamos,
Angular como función
incrementalmente,
es decir,
cosa que vayamos usando,
vamos a ir,
pues,
como diciendo,
ok,
quiero utilizar
formularios reactivos,
quiero utilizar el routing,
quiero utilizar,
pues,
el módulo ahorita
para una petición HTTP.
Entonces,
lo voy incluyendo
a medida que lo voy necesitando
en la aplicación.
Para eso,
voy a tener que ir
al app module
y vamos a importar
algo que viene
desde el Angular command,
HTTP,
y vamos a importar
algo llamado
el Angular,
digo,
el HTTP client module.
¿Listo?
Y listo.
Esto lo tenemos
y lo ponemos aquí
en imports.
Un poquito de spoiler
de esto.
Y los módulos
siguen estando vigentes
en Angular,
la programación modular
sigue estando
y ha estado muy presente
en Angular
desde sus inicios.
Sin embargo,
en la versión 15
están iterando
una forma
de que los módulos
empiecen a desaparecer
o a prescindir de ellos.
Porque en aplicaciones
como RIA,
como NES,
como que esto
no se usa.
Simplemente,
pues,
si yo tengo
una petición en Axios,
pues,
utilizo Axios
o utilizo,
pues,
cualquier librería.
Y en las versiones
futuras de Angular
vamos a ver
un poquito
de menos módulos.
Y eso es bastante divertido
porque entonces
hace que la curva
de aprendizaje
no sea tan compleja.
Pero tampoco es muy difícil
implementar esta línea ya.
Sí,
a ver,
a mí lo único que así
que me...
que...
O sea,
está bien por un lado
porque importas
todos los módulos
como en el punto de entrada
de tu aplicación.
No,
a nivel de componente.
Lo cual
lo hace ordenado
pero claro,
por otro lado
me imagino
que en una aplicación
muy grande
me imagino
que se pueden crear
no sé si submodulos
o hacer lazy load
de módulos
me imagino
porque
en una aplicación
muy grande
si lo tienes
en el punto de entrada
todos los módulos
que necesitas
tiene que quedar
ese archivo
enorme,
¿no?
Normalmente
Angular
ya...
Tú pongas
los módulos
en el punto de entrada
el hacer lazy loading
de lo que se vaya necesitando.
Sin embargo
para estar más a favor
como con las APIs actuales
vamos a empezar
a quitar un poquito
de los módulos
y empezar a utilizar
como las APIs normales
de pues de JavaScript
para hacer como
lazy loading
imports
y demás.
Vale.
Buenísimo.
Listo.
Entonces vamos a
en este momento
vamos a ir a nuestro
app component
ahí está
y pues como ya incluimos
ese módulo
ya lo podemos utilizar
en cualquiera
de nuestros componentes.
En este caso
entonces
voy a importarme
este no
este se me autocompletó
pero lo que vamos a importar
es Angular Common
HTTP
lo que dijimos
fue que queríamos utilizar
ese módulo
pero ahora pues vamos
ahora sí ya vamos
a utilizarlo
en este caso
utilizamos el
HTTP Client
y aquí entonces
vamos a hacer algo interesante
vamos a decirle
que yo quiero
utilizar
pues la utilidad
de pues de empezar
a hacer peticiones
por medio del HTTP Client
entonces aquí
voy a poner un HTTP
y le voy a decir
que quiero inyectar
esa pues
ese servicio
o esta
pues básicamente
como utilizar
el HTTP Client
acá hay algo interesante
y es que tenemos
un patrón
que se llama
el patrón de inyección
de dependencias
este patrón
es muy común
por ejemplo
en aplicaciones
de Kotlin
de Java
de Android
porque bueno
y de iOS
que vienen un poco más
de la programación
en los objetos
en donde nos permite
utilizar una instancia
con el patrón singleton
hacia pues toda nuestra aplicación
entonces realmente
lo que se asegura
es que solo haya una instancia
de HTTP Client
y con JEC
estamos utilizando
esa instancia
solo una vez
a través de toda nuestra aplicación
es básicamente
lo que hace esta línea
es muy raro
con todo mi cariño
que no use un decorador
para esto
no o sea
ya que los tiene
que raro
que no te hice
un decorador
para hacer exactamente esto
sería interesante
hacerlo por medio
de un decorador
y realmente ahorita
hay
como Angular
si te soy sincero
también en algunas partes
Angular
en la versión
como de la versión
7, 8, 9
estuvieron muy enfocados
a trabajar
en el nuevo
motor de render
que se llama Ivy
que es muy parecido
a cómo funciona
el motor de Svelte
que es como hacer
muy inicianosamente
cómo se manipula
el DOM
o el incremental DOM
que utiliza Svelte
allí se ocuparon
un buen rato
en casi
volver a desarrollar
el core
de Angular
el motor de render
sin dañar las aplicaciones
actuales
y a partir de ahí
de que ya Ivy existe
estamos ya explorando
una nueva generación
de aplicaciones
en Angular
en donde ya tenemos
pues ya tenemos
más cosas
como librerías
que entonces ya utilizan
decoradores
para hacer esto
ya está mucho más
soportado
por ejemplo
con otras
church parties
como Tailwind
en fin
vamos a ver
una explosión
muy interesante
de cosas en Angular
en estos últimos momentos
muy bien
pinta bien
pinta bien
me gusta
lista
entonces bien
entonces vamos a
a acá hay algo interesante
normalmente
un componente
tiene algo llamado
el ciclo de vida
que igual en React
también
pues también pasa
que es
ok
una vez yo
mi componente
ya se renderizó
quiero ejecutar algo
entonces normalmente
en Angular
tenemos algo llamado
el engine on init
en React
tenemos un use effect
que es como
cuando eso llegue
entonces quiero hacer
una petición
entonces aquí tenemos
es un método
que es un trigger
un disparador
para decir
ok mi componente
ya está renderizado
ya está listo
hagamos algo
¿qué vamos a hacer?
una petición
allí entonces utilizo
el HTTP
y utilizo un GET
y allí es donde
entonces voy a
llamar a
mi API
por ejemplo
de productos
acá
pongo la API
de productos
y acá hay algo
que normalmente
sí
hace que
como que todos
miren un poco raro
esto
por defecto
no es una promesa
no es una promise
normalmente
nosotros resolvemos
esto con una wait
con una sync
en Angular
viene
digamos que ya
de forma implementada
un patrón de programación
reactiva
utilizando
en GRX
en GRX
es como la librería
de extensiones reactivas
más usada
en JavaScript
entonces
aquí lo que
lo que tenemos
no es un observable
digo
no tenemos una promise
sino tenemos
algo llamado
un observable
y en vez de hacer
un punto
den
hacemos algo llamado
un punto
subscribe
que es básicamente
algo similar
a pues a resolver
una promesa
entonces aquí
ya tenemos
la información
en teoría
aquí tendríamos
la información
que nos está
retornando
esa
pues ese
en puente
algo divertido
aquí es que
podemos empezar
a
a tipar
fuertemente
y por ejemplo
ya que tenemos
nuestra interfaz
voy a
hacer un import
de
product
allí debe estar
un poquito más atrás
ahí está
models
product
me
implemento
product
listo
y le puedo decir
qué tipos de datos
porque al final
esto es un string
pues el frontend
así sea
next o next
no sabe
qué tipos de datos
va a recibir
pero lo que sí
podemos es tipar
entonces yo le puedo decir
ah mira
aquí tú vas a recibir
un array
de
productos
y entonces empezamos
a tener tipado
pues fuerte
respecto a eso
y pues no utilizamos
un any
si no le digo
mira esto
me va a retornar
algo que cumple
con mi interfaz
y ya el data
ya estará tipado
con lo que
se supone que
le has dicho
va a venir
exactamente
entonces aquí
en data
tenemos que
va a ser
una lista
un array
de productos
entonces ahora
voy a tener
algo muy sencillo
y es como
pues una lista
de productos
aquí
que fíjate
que acá
ya me
el compilot
me lo puso
y es como
ok
tienes productos
una lista
de productos
que inicializa
en vacío
que eso
te lo ha puesto
automáticamente
tenemos que
aceptar
la inteligencia
artificial
que fuerte
no no
está genial
recuerden que
la inteligencia
artificial
no nos va a
suplantar
o en la mayoría
de casos
no
sino va a ser
una ayuda
un asistente
para hacer
las
que bueno
listo
entonces
bien
acá
entonces le digo
ok
listo
pues acá
tengo
mi array
de productos
que es igual
a lo que yo
recibí
desde este
en cuenta
como es un array
nos queda
iterarlo
y renderizarlo
renderizando
pues utilizando
nuestro componente
app product
entonces acá viene
algo lindo
y es que
normalmente
podemos hacer
un render
o hacer
la iteración
con algo llamado
un
ng
for
ng for
sería la manera
en que angular
hace una iteración
y como ya
tengo una lista
tengo una lista
de productos
entonces voy a crear
una variable
iteradora
y lo voy a llamar
product
y la itero
de mi array
de productos
y acá
simplemente
entonces le paso
el product
de ese día
la variable
que estoy iterando
y listo
esto me está
volando a la cabeza
esto me está
volando a la cabeza
porque claro
yo me hubiera esperado
hacer el for
en un contenedor
como en el if
el if
estaba el if
en el contenedor
pero el for
es en el propio
componente
que quieres
que se repita
wow
vale
esto me acabo
de volar
un poco
la cabeza
entonces
dices
let
products
es lo que
tenemos
y ya le pasa
directamente
el product
vale
y no hay
un shortcut
en Svelta
y un shortcut
de que si el atributo
bueno
el atributo
la propiedad
se llama igual
que lo que le quieres
pasar
se puede quitar
las comillas
no sé
aquí en Angular
ya Svelta
que está muy chulo
que tiene muchas cosas chulas
mira que no
no he visto
o sea
de por si creo que
esta es la manera
más reducida
que podríamos
ver
a menos que yo ya
ya me a estupe
pero sería trampa
digamos
no me imagino en Angular
no porque eso es Svelta
que le gustan
estas cosas frikis
pero ojalá
veas un shortcut
porque es que aquí
tiene todo sentido
el mundo
va
interesante
interesante
voy a ver
eso de Svelta
a ver
cómo funciona
listo
vale
entonces ya deberíamos
tener la lista
de nuestros productos
oye pero que fácil
¿no?
hacer
vale
están los productos
no se ven
algo hemos hecho
por qué no se ven
eso está raro
de por qué no se están viendo
a ver
vamos a ver
deberían ya ver
se están renderizando
sí ahí se están renderizando
pero no se ven
no será
algún alfichero
que no ha guardado
a ver
vamos a ver
qué puede estar fallando
taraná
ahí hay ficheros
ah no
igual
no creo que todos
están bien
vamos a ver
si es
si es
stangy
if
que puse
porque al final
yo ya me estoy asegurando
que si hayan
será lo del template
este
a lo mejor
que
a lo mejor
no es
no sé si era
content
bueno
mira
dice en el chat
container
container
a veces era container
y yo me equivoqué
con el template
no pasa nada
ahora sí
muchas gracias
a la persona del chat
muchas gracias
están atentos
para que veas
oye
Nico
era una prueba
primero
un primer aplauso
porque Nico
ha conseguido renderizarlo
que sepas que en el chat
la gente está súper contenta
que dice
ah que fácil
que mames
y les he puesto rápidamente
una encuesta
para ver si a la gente
le estaba gustando Angular
tenían tres opciones
que era
si te gustaba Angular
si te estaba poco a poco
convenciendo
la tercera era
no
pero Nico
es un crack
y que sepas
que los resultados
han salido bien
o sea que han salido
han salido
me alegra
me alegra bastante
quiero ponerle
una cereza
en el pastel
a esto
y es fíjate
que acá ya tenemos
el render
entonces tenemos
un render
de productos
todo bien
todo chévere
listo
sin embargo
que hay algo que pasa
mucho en nuestras aplicaciones
sobre todo
si manejan las imágenes
y es que el render
de todas las imágenes
pues se está haciendo
directo
o sea como que aquí
estoy cargando
yo veo que aquí
como son 200 productos
los que me envía la API
pues realmente estoy haciendo
la carga de 200 productos
en pues ahí mismo
eso que pasa
pues que con nuestros usuarios
pues están haciendo
el render
de imágenes
que todavía ni siquiera han visto
o no sabemos
si van a llegar hasta allí
¿qué quiere decir eso?
que yo debería cargar
las imágenes
a medida que yo voy
scrolleando
a medida que yo hago scroll
que el usuario va empezando
a pues a navegar
en el sitio
pues a hacer
la carga
de la imagen
no tiene sentido
cargar
la imagen
de hasta abajo
si al final
no sé si el usuario
va a llegar hasta allí
claro
entonces
Ness tiene una cosa
muy interesante
que es el componente
image
en angular
también se creó
un componente
para hacer optimización
de imágenes
en esto
en esto
entonces
por ejemplo
voy a traerme
ese componente
que me va a permitir
hacer esa optimización
de imágenes
ese componente
ustedes lo pueden buscar
esto es algo nuevo
de angular
realmente
lo pueden buscar
como
ngcrc
que es este componente
para optimizar imágenes
si alguien del chat
que ya conoce angular
no conocía
es hora de que
con una simple línea
de código
puedes optimizar
tus imágenes
para lograr características
como el de easy loading
en las imágenes
interesante
es bastante sencillo
de utilizar
realmente sacamos
el paquete
de angular common
entonces lo
lo vamos a importar
decimos que queremos
utilizarlo
tenemos que incorporarlo
en el app module
siempre hay que
tener ese paso
cosa que vayamos
a utilizar
y no hay un comando
para hacerlo
o sea no sé
igual que para generar
componentes
no hay un comando
para añadir un módulo
que te actualice
todo esto
es que es un poco rollo
tener que importarlo
y tal
ok
es muy manual
es como muy manual
es decir
o sea entiendo que es manual
también es el otro
pero como es tan obligatorio
que lo hagas ahí
y como se te olvide el import
de la línea 19
que has puesto
la lías parda
porque entonces te dices
¿y por qué no funciona?
no sé si te da algún error
o algo que sea muy
fíjate que sí
a ver
déjamelo
no lo vamos a importar
para ver qué error
me podría dar
vale vale
que va a ser descriptivo
y te va a decir
oye impórtame esto
desgraciado
entonces listo
entonces vamos
no lo voy a importar
todavía no lo he importado
pero voy a empezar
a utilizar el componente
el componente
entonces iría a
el componente
que está haciendo
pues la renderización
y en vez de utilizar
un CRC normal
lo que utilizo
es un
engine
CRC
ese es el componente
ese es el componente
que él va a
pues a utilizar
para hacer
el lazy loading
ahora aquí
hay algo que nos
pues nos pone
un poquito más estricto
y es que
y eso debería ser
una buena práctica
que es una mala práctica
de todos los friends
y es no colocar
un ancho
y un alto
de la imagen
entonces
normalmente
deberíamos colocar
un alto
y un ancho
luego hay
unas formas
de que pues eso se
de acuerdo al layout
pues entonces
se estiria o no
pero por ahora
la buena práctica
es colocar
un width
y un height
esto realmente
ayuda un montón
y te da muchos puntos
en renderizado
y pues
para no tener
como saltos
en la interfaz
si mira
justamente el otro día
hicimos un
alguien pasó un porfolio
y le expliqué
haz esto
de dejar el aspect ratio
con el ancho
y el alto
porque si no da saltos
cuando se cargan las imágenes
y tal
exacto
eso de que
lo que dices
que
uno está cargando
en un sitio
y como que
se empieza a mover
todo
y eso
Google lo penaliza
lo penaliza
y dice
oye
si tu sitio
mientras carga
todo empieza
como a saltar
Google lo penaliza
y te dice
oye
pues esa no es la manera
de hacer las cosas
y te empieza a bajar puntos
Counting layout shift
básicamente
ah
ese sería
literalmente
es el
counting layout shift
lo que
lo que conocemos
como ese salto
y que Google penaliza
entonces fíjate
que acá ya tengo
un error
y me dice
oye
yo no
yo no sé
que es ngzrc
no sé
de dónde
sale
ese
pues ese comportamiento
y si lo
y si vamos acá
también me dice
me empieza a decir
oye
ngzrc
yo no sé
de dónde sacaste eso
de dónde sacaste
este
nuevo comportamiento
y ahí es donde
podría recordar
que
pues tenemos que importar
el módulo
si no
no va a funcionar
porque ese es el que me da
ese comportamiento
entonces
aquí ya lo importa
y entonces
ya no debería tener
ningún error
aquí por ejemplo
ya no me dice nada
y vamos a ver
cuál es el comportamiento
entonces
fíjense
que voy a recargar todo
voy a hacer un control
fíjense que acá
me cargó
un par de imágenes
ya no me cargó
todas las imágenes
me cargó
solo las que
pues como las dos
tres primeras
sin embargo
a medida que yo voy
haciendo scroll
si se van fijando
aquí en el
en el network
ahí esperan que
este network
en el network
voy a limpiarlo un poquito
a medida que voy
haciendo scroll
él va entonces
haciendo la carga
para el usuario
es transparente
para el usuario
sigue haciendo scroll
a cualquier velocidad
no importa
entonces
simplemente
pues estamos
renderizando
a medida
que el usuario
pues va
navegando en la página
eso hace que tu sitio
cargue mucho más rápido
pues porque no estás
cargando imágenes
que realmente el usuario
no ha llegado allí
o no ha scrolleado
a ese punto
y eso simplemente
lo hicimos con esta directiva
mucha gente está
pero el texto se carga
si el texto sigue
se carga
esto solo a nivel de imagen
que hace como un lazy load
pero lo bueno
es que cuando ha hecho scroll
muy rápido
se ha visto que ha dejado
el hueco
para la imagen
entonces no está
el layout shift
que contábamos antes
muy chulo
mucha gente en el chat
no lo conocía
y te lo están agradeciendo
perfecto
si antes
de Angular
era el momento
de decir
hoy hago un pull request
bueno
no sé si hoy
pero
quiero hacer un pull request
para hacer optimización
de imágenes
y solo cuesta
cambiar el ng
por el
el CRC
por el ng CRC
tienes que tener en cuenta
que ya te va a pedir
una dimensión
y si quieres una dimensión
digamos responsive
de acuerdo al layout
hay un
hay un
atributo
para hacerlo
ya de acuerdo al layout
si no estoy mal
se llama
el componente
creo que es
fill
si tú le das fill
de acuerdo a la cajita
en donde está la imagen
va a ancharse
entonces podrías
si no quieres
decir un ancho y en alto
podrías darle un fill
en true
y ya
él va a coger
esas medidas
que realmente también
funciona muy igual
al componente
de image
de nest
también
si pones layout fill
hace exactamente
el mismo comportamiento
que tal
como lo ves
bueno pues
ahora bien
me ha gustado mucho
el hecho de
como se ha hecho el fetch
lo del disk.http.get
eso me ha gustado
lo del for
pues ya te he dicho
me ha sorprendido
pero porque
no estoy acostumbrado
me ha volado la cabeza
me gusta porque
ha quedado muy limpio
tengo todavía
el corazón
un poco dividido
por la lectura
muy horizontal
pero me gusta
me gusta
el concepto
pero claro
como que al principio
sabes
o sea
leyéndolo de izquierda a derecha
como que me cuesta
porque digo
es un componente
pero no
hasta que no llego al final
no me doy cuenta
que es un
sabes
que es un loop
puedes hacer esto
y ya
si
así creo que queda
un poco más
si me gusta
creo que me gusta
un poco más
pero
como que estoy haciendo un for
y luego le mando
la variante
y ya con eso
lo puedes leer mejor
vale
pues me gusta
me gusta
o sea
las cosas que estoy viendo
me han gustado
oye
tengo una pregunta
no sé si te pillo a contrapie
si te pillo a contrapie
lo siento
pero
hay un concepto
de Angular
que mucha gente
me lo repite
que yo lo he leído por ahí
pero no he llegado a entenderlo muy bien
no sé si a lo mejor
lo ibas a explicar más adelante
o si no hace falta entenderlo
que es el de
two way
data binding
¿no?
porque en React
no tenemos el two way
data binding
pero tampoco entiendo muy bien
o sea
como se utiliza
en Angular
y que
que diferencia
tiene este sentido
con React
y por qué puede ser
problemático
o beneficioso
perfecto
esa es una gran pregunta
y viene un poco de
desde AngularJS
de la primera versión
de Angular
en donde teníamos
esto del
two data binding
que es como
el enlace
de doble vía
es decir
si yo hago un cambio
en el componente
me lo va a transmitir
a la lógica
y también
si lo hago
desde
pues desde acá
también me transmite
hacia el componente
eso en React
realmente no está
y tiene un sentido
¿no?
normalmente ahí
lo que utilizamos
es un state
para decirle
solo desde ciertos puntos
se hace como
el flujo
de la información
en Angular
está cambiado
en Angular
si bien la API
funciona igual
o sea
no ha cambiado
o sea
yo sigo
modificando
un atributo
de esta manera
y ya
y simplemente
pues aquí
asigno un nuevo valor
y no hay tanto
rollo
no hay tanto problema
por detrás
el core
lo que hace
si es leer
ese enlace de datos
y comunicarlo
solo que como mencionaba
el nuevo motor
que es el de Ivy
funciona muy similar
al de Svelte
en donde empieza
a hacer comparaciones
más como exactas
del DOM
para saber
en donde tiene que ser
el cambio
entonces
si tenemos
como el concepto
de tu data binding
pero lo hacemos
digamos que
a una forma
mucho más precisa
con el nuevo motor
de Ivy
o muy parecido
a como lo hace Svelte
vale
buenísimo
gracias por la explicación
muy buena
y me he enterado
así que
si me he enterado
es que ha sido muy buena
la explicación
y otra duda
que tengo
viendo lo que hemos hecho
hasta ahora
ahora claro
viendo como has hecho
el tema de la promesa
que luego lo guardabas
en el estado
como se guarda estado
mi pregunta era
como
cual sea la mejor forma
de hacer un estado
de carga
sabes
o sea
de tener un loading
mientras estás recuperando
esperando los datos
como harías el estado
o sea
crearías un estado
que lo
sabes como en React
que pondrías
actualizar el set loading
a false
antes
o sea
cuando termina la promesa
y tal
pero aquí tenemos observables
entonces no sé
si esto automáticamente
hay una forma muy sencilla
que ya te lo da
o
como haríamos exactamente esto
listo
si
realmente pasa algo
muy similar
que en React
y es que
si tendríamos que crear
no sé
una variable
loading
y manualmente
decirle como
ah mira
aquí ya
ya tengo el dato
o aquí ya no tengo el dato
y prenderlo
o apagarlo
con un true o un false
eso sí
toca hacerlo como manual
igual como lo haríamos
en React
pero
si hay algunas librerías
de por sí
hay una librería
muy
muy
muy interesante
que pues ya
utilizando en GRX
te da como
algunos estados
ya por defecto
para pues
lo que es el loading
y eso
muy parecido a
React Query
por ejemplo
que ya te trae
como estados
por defecto
pero
digamos que
directamente no
o sea
si lo quieres hacer
por tu cuenta
pues sí
prendes una variable
la pagas
pues algo muy similar
como lo haríamos en React
si no
ya te entregas
a un modelo
de Redox
o alguna librería
que te ayude
en esta labor
claro
tendría
ahora si lo quisiéramos hacer
lo tendríamos que hacer
manualmente
y ya está
sí
vale vale
visto visto
muy bien
pues no sé
¿hay algo más
que quieras comentar
o
cómo lo llevas
yo creo que
yo creo que
está bien
el demo
no sé si
o sea
no sé si quieren
que me aviente
hombre
algo que
claro
o sea
a ver
que menuda pregunta
Nico
nosotros siempre estamos
para que te avientes
o sea
tú aviéntate
todo lo que quieras
mira
yo hasta las 8
podemos estar aquí
o sea que
bueno a las 8
que en tu caso
no sé qué capacidad
pero que faltan 40 minutos
o sea
que puedes darle
todo lo que quieras
y más
aviéntate
voy a hacer una cosa
que normalmente
puede sonar compleja
pero no lo es tanto
y precisamente sería el mito
de quitarlo en Angular
y es
hacer server
server rendering
que tan complicado
lo estaba preguntando
todo el mundo
que si lo que estabas haciendo
tenía server server rendering
y yo entendía que no
pero entiendo que no
¿no?
claro
no
exacto
esto no tiene server server rendering
es decir
si yo voy
y veo el código fuente
tengo aquí un app root
que no tiene contenido
no hay contenido allí
no hay cosas que
de pronto en SEO
o en una carga
desde el lado del servidor
me diga
hay cierto contenido
no lo hay
sin embargo
implementarlo en Angular
no es tan complejo
como se piensa
sino que
aquí tenemos
un
un paquete
llamado Angular Universal
que es el que haría
la labor
entonces vamos a implementarlo
para que vean
que no es tan complejo
¿y qué hay que hacer?
correr este comando
corres este comando
y ya
y literalmente
va a hacer unos ajustes
en tu aplicación
para que ahora
tu aplicación de Angular
quede con server server rendering
entonces solo hay que correr
este comando
y listo
no hay nada más
que hacer
ahora
obviamente
eso te iba a decir
¿cómo que no hay nada más que hacer?
¿cómo sabe
que el get
o sea
a ver
¿habría que mover el get
de sitio o no?
¿o lo hace automáticamente?
nada
¿en serio?
no hay nada
no hay nada
que hacer
oye pues está muy chulo
simplemente
ay no sé por qué
se me copió esta parte
se ha copiado una cosa random
ahí
listo ya
ahora
fíjate que voy a añadir
ese comando
y realmente fíjate
que no va a tener
nada más que hacer
solo correrlo
y ya
pero
si ustedes ya están
y eso pasa igual
en
por acá le voy a decir que sí
eso pasa igual
en React en Vue
cuando hacemos server server rendering
cuando estemos ejecutando
cosas que si van
desde el lado del cliente
por ejemplo
local storage
local storage
solo tiene sentido
correrlo desde el lado del cliente
cosas como
navigator.geolocalization
eso no va a correr
en el lado del servidor
porque es una API
que corre en el browser
entonces cuando tengamos
ese tipo de APIs
si nos va a tocar hacer
como un diferenciador
de decir
oye
este bloque de código
va en el cliente
o este bloque de código
va en el servidor
pero si ustedes se fijan
en este momento
no estoy utilizando
nada
nada
que
usted
esté utilizando
una API
directa
que solo
dependa del browser
esto
como es
hecho por Angular
el paquete
de HTTP
client
entonces
ya vas a ver
que esto
tiene que hacerlo
desde el lado del servidor
y ya
entonces
no hay que hacer
ningún ajuste
literalmente
él hizo unos ajustes
por mí
pero yo no
hice código
es decir
él creó un archivo
llamado
min.server
creo
por allá
unas configuraciones
en el app module
en fin
hizo algunas cosas
para volver
mi aplicación
de Angular
pues que ahora
tenga server server
render
y me añadió
unos comandos
como
como están
esos comandos
fíjate que acá
tengo unos nuevos comandos
que antes no tenía
tengo un
de server server
rendering
tengo
para desplegar
mi servidor
de server server
rendering
para hacer el build
o para hacer
pre render
etc
entonces voy a
poner este comando
que sería el de dev
y entonces
vamos a correrlo
y ver qué pasa
por aquí me dice
oye esto es
algo de desarrollo
recuerda
o sea
esto es la versión
de desarrollo
y
si lo ponen así
tan grande
y en rojo
Nico
esto es porque
alguien lo ha hecho
¿sabes?
alguien ha pensado
que era buena idea
el servidor
en modo de desarrollo
tal cual
subirlo a producción
exacto
entonces como
calma
si quieres enviar
una aplicación
pues ya tienes
este comando
que es hacer
el build
y aquí es donde
pronto
causa un poco
de fricción
normalmente
si tú eres
desarrollador
de angular
estás
enfocado
a hacer
single page
applications
y tienes
cosas como
fiverr hosting
o gps
pero aquí
ya necesitas
o sea
necesitarías
un servidor
de node
porque vas a
ser
realizado
desde el lado
del servidor
tienes cosas
como
la edify
vercel
puede hacer
vercel
es muy bueno
para eso
por ejemplo
para que
nosotros allí
despleguemos
nuestra aplicación
o pues ya
te creas
una instancia
en aws
en digital ocean
que tenga
node
para que desplegues
la aplicación
porque recuerda
que aquí ya
estás haciendo
renderizado
del lado
del servidor
así que necesitas
un servidor
de node
pero listo
entonces
aquí ya tenemos
van a estar
cargando
en la aplicación
creo que tengo
mucho zoom
ahí está
y veamos
ahora
ver código
fuente
y acá
tenemos
el pre-render
aquí tenemos
que bueno
esto
acá literalmente
ya tenemos
renderizado
del lado
del servidor
recuerden que
antes no teníamos
antes
pues todo
el render
se hacía
desde el lado
del cliente
y teníamos
un vacío
ya ahorita
vemos que hay
contenido
que se pre-renderiza
haciendo que
pues en SEO
pues tengamos
buenos beneficios
o que por ejemplo
pues en
performance
pues como ya viene
renderizado del lado
del servidor
pues cargue
más rápido
y eso que ahorita
está en una versión
de desarrollo
entonces tenemos
esos comentarios
pero apenas
lo llevamos a producción
pues se borran
estos comentarios
y queda mucho más
light la aplicación
pero ya tenemos
el renderizado
y como tú viste
yo no tuve que hacer
nada
no tuve que decir
esto es del lado
del cliente
esto es del lado
del servidor
él ya sabe
que
como utiliza Angular
pues hago esto
desde el lado
del servidor
con Angular
tengo una pregunta
porque cuando has entrado
ha hecho
como el parpadeo
como cargando
en el cliente
y me ha sorprendido
porque he dicho
ostras mira
no ha hecho el server side
me ha mentido
pero no
luego tiene HTML
o sea
algo está haciendo ahí
porque al principio
ha hecho como el parpadeo
como cargándolo
en el cliente
¿no?
sí
ese es el proceso
de hydration
que tanto hemos
oído hablar por allí
es el proceso
para de pronto
los que no conocen
este concepto
cuando realizamos
el lado del servidor
pues le enviamos
un HTML
a nuestro browser
y luego
para volverlo
otra vez interactivo
desde el browser
pues se hace un proceso
de hydration
ese es el titileo
que hay ahí
en ese proceso
de hydration
pero
para evitar eso
podemos hacer
un pre-render
y generar un pre-render
para que evitemos
como esa mala experiencia
y para eso
correríamos un comando
como este
para generar un pre-render
de la aplicación
sin embargo
Angular
en las nuevas versiones
y por aquí
para que vean
que tampoco es mentira
aquí vamos a
si ustedes van
al roadmap
de Angular
vamos a ver
que
él está
probando
nuevas opciones
para hacer
hydration
un poco más
al estilo de Astro
por ejemplo
y hacer parte
al hydration
y no hacerlo
directamente todo
sino pues
componente
que se va utilizando
o hasta
ver si conceptos
como
resmobility
de quick
podrían hacer sentido
dentro de Angular
entonces
para
las nuevas versiones
vamos a ver
si tenemos
un avance
en parte
de la hydration
o implementar
conceptos
de resmobility
dice
hay una opinión
aquí
polémica
Nico
a ver que opinas
dice
Jacón Dalbert
dice
ah no
Jacón Dalbert
no
decía
Manu Gumdev
dice
el SSR
de Angular
no está
para ser usado
en cosas serias
ahí dejo
mi opinión
ok
bueno
no lo sé
crees que sí
crees que no
pues depende
depende como lo mires
si Fibers
y Google Cloud
no es una aplicación
seria
pues depende
de lo que sea seria
para nuestro usuario
toma
toma
y toma colleja
se ha escuchado
collejilla y todo
pero Google Cloud
está hecha en Angular
la Fibers
o sea
no Fibers
no es como tecnología
sino
la aplicación
Fibers
donde administramos
nuestros recursos
está hecha en Angular
y hay un montón
de aplicaciones internas
en Google
y también otras empresas
no de Google
sino empresariales
que tienen
y funciona
muy muy bien
y son empresas
gigantes
grandes
entonces
yo allí pues
pondría mi opción
que sí
que sí que se puede usar
y que hay ejemplos
de empresas
que lo están utilizando
y que no hay ningún problema
buenísimo
y entonces
dicho esto
yo ahora tengo
tengo más preguntas
¿puedo Nico?
si te tienes que ir
dímelo
que yo soy muy pesado
dale dale
hazme preguntas
no pero es que
si te tienes que marchar
o algo avísame
que yo
cortamos y ya está
o me lo dices en privado
o lo que sea
y yo corto
no en serio
que no te preocupes
lo que sí diría es
o sea
el demo
dejémoslo hasta por aquí
y empecemos a
a atender más preguntas
vale
vale vale
pues sí
porque yo te iba a preguntar
vale voy a poner entonces
este
pam
oye muchas gracias
por la demo
y todo esto
sin ver demo y tal
tema SEO
entiendo que Angular
también tendrá algún tipo
de componente
o algo que te añada
para cambiar title
descripción
y todo esto
¿no?
sí
sí sí
es muy interesante
que lo menciones
como tal
no tiene un componente
en específico
sino viene como
incluido
como que en las
best practices
de la aplicación
ahorita no vimos
routing
¿no?
porque no
no hemos visto routing
pero
no es muy complicado
el garrote
pero
veamos routing
entonces
por ejemplo
aquí tenemos
nuestra
nuestra
pp routing
y por ejemplo
yo le podría decir
oye
en un pad
llamado
contact
no sé
voy a llamarlo
contact
contact
entonces en ese pad
ve y despliega
o
en ese componente
el componente
content
no existe
vamos a crearlo
así como
velozmente
para
vamos a
crearlo
por acá
y le voy a decir
oye
hazme un componente
que lo vamos a
poner allí
en esa carpetita
esperándome que
haga un poquito
más de eso
eso ahí
components
g de generate
y c de components
que lo sepáis
entonces ahí
generé
mi contacto
hay algo
algo me falta
aquí
use script
ahí está
ng generate
component
y lo quiero
en esa carpeta
será que
la ha generado
antes sin darte
cuenta del contact
no sé
a ver
no no
ahí
ahí no está
ahí no está
a ver
a ver
si es un typo
components
¿no?
contact
ahora lo voy a intentar
generar
dice que no coincide
con un módulo
a ver
voy a intentar
usar lo que
él me está diciendo
la sugerencia
que es
hacer un
skip import
y
a mí me lo creó
pero no lo incluyó
dentro del módulo
raro
raro que no me lo haya
creado
pero bueno
voy a
voy a ponerlo
entonces
tararán
entonces aquí
teníamos nuestro
product component
y vamos a poner
nuestro
contact
ahí está
contact
contact component
y lo vamos a poner
como parte de la aplicación
listo
solo para notarlo
también
aquí yo estoy
y esto si tú tienes razón
Midu
acá estoy
en el
entry point
de mi aplicación
poniendo
todos los
componentes
sin embargo
se puede hacer
la easy loading
eso
después lo podríamos ver
pero se puede hacer
la easy loading
y entonces
no
no cargar
todo aquí
en la aplicación
sino que a medida
de componentes
hacer la easy loading
por ahora no hay
la easy loading
pero se puede
se puede
y no cargamos
toda nuestra aplicación
simplemente con
pues todos los
componentes iniciales
pero listo
entonces vamos a decirle
que en esa ruta
vamos a
pues poner
ese componente
listo
entonces
y que raro
que tengas que importarlo
como dos veces
¿no?
en el app module
y también a nivel
del app routing module
del routing
sí
aquí básicamente
es para decirle
hey
el módulo
pues vamos a tener
esta familia
de componentes
y aquí ya es
declarar el routing
que es
hey
para este path
pues
renderiz este componente
ok
para que Angular
entienda que ahora
tiene que hacer routing
vamos a utilizar
un componente
llamado
el router
outlet
y ya
y él básicamente
va a empezar
a renderizar
en este
en esta parte
pues toda la aplicación
¿no?
por ejemplo
si moviéramos esto
ya a un
es más
vamos a moverlo
es decir
que
cuando yo haga
products
pues entonces
me renderiste
un componente
de productos
vamos a
a crear
products
que sería
como la página
y aquí
podríamos empezar
a diferenciar
entre página
y componente
yo podría decir
esta es la página
de productos
y otra cosa
son los componentes
voy a ponerlo
entonces
voy a importarlo
tararán
porque una cosa
es el
product component
que es como
un producto
en específico
y otra sería
pues ya es el render
la página entera
claro
entonces voy a decirle
ahí está
pues el component
y acá
es más
ya que me entré
en este problema
vamos a hacer
lazy login
ya cuando has entrado
ya hasta
hasta el fondo
ajá
entonces le voy a decir
es más
voy a probar algo
que Angular
está probando
y es lo que te mencionaba
de pronto
ya no tener tantos módulos
y lo que tú me mencionas
de
pero por qué lo tengo que importar
aquí en el
en el
sí en el
app module
y toda la vuelta
por qué no hacerlo
más fácil
pues te voy a decir
cómo Angular
lo va a hacer
más fácil
entonces
fíjate acá
que acá
pues ya tenemos
una página
products
y listo
entonces tenemos
products
ahí está
products
component
entonces voy a
decirle que
renderice
ahí
listo
cómo hace Angular
para saber que
si al final
yo te dije a un inicio
que
pues un componente
debe pertenecer a un módulo
pues
y este componente
ahorita no pertenece a ninguno
aquí
básicamente Angular
está explorando
una API
llamada
stand alone
que significa
que simplemente
este componente
no pertenece a ningún módulo
y nos evitamos
todo lo que es
que tengo que importarlo
en un módulo
etcétera
esto todavía está experimental
pero pues aquí vamos
pues probando
listo
listo
entonces vamos a decir
voy a decirle
que pues toda esta lógica
ya no va
dentro de mi aplicación principal
sino pues va a haber un componente
que utilice esta lógica
y fíjate
aquí ya hay una alerta
y es
si este componente
si este componente
no
pues
no encuentra
como un alcance
un scope
de decir
de dónde está
este app product
de dónde sale
este app product
como esto es stand alone
vamos a tener
que
importar ese componente
de forma ya más explícita
ya no lo importamos
a nivel modular
sino que
le importamos
a mira
este componente
o este product
component
la página
necesita
de
el componente tal
y ya
y se lo trae
entonces ya
ya cambia un poquito
de papeles
claro
porque ahora
es más granular
esto me gusta más
¿no?
porque ahora
es más a nivel de página
donde puedes tener estos
ya no es tanto
en el app module
que es como
un monolito
de módulos
ahora es más
exacto
entonces aquí es como
ah mira
pues si la página
utiliza un componente
pues te traes ese componente
o sea te trae lo que vas a utilizar
para esa página en específico
vamos a ver
creo que es declarations
a ver
¿cómo es que yo trae?
no me acuerdo
si es imports
pues aquí ya me está diciendo
que no es imports
porque no es un módulo
si no estoy mal
es o declarations
o es
algún API
que no me estoy recordando
en ese momento
pero vamos a buscarlo
en la documentación
vamos a ir por acá
a los stands
mira dice
VIP 515
dice que sí
es declarations
es declarations
ah ok
entonces debe ser
declarations
lo que pasa es que
no te aparecía
pues no
ahí no
le dice que no
ajá
si aquí me sale
un
como que
hey
no
pero vamos a buscar
entonces aquí
en los stand-alons
que hay ejemplos
precisamente
de
ah no
pero fíjate que sí
que es con imports
acá por ejemplo
se trajeron un image
componente
a ver
y vamos a ver
dice
pero no pueden ser importados
directamente
el componente
puede comprar
creo que
si no estoy mal
este
también entonces
debería ser stand-alone
claro
a ver
sí
ahí ya
ahí ya
los dos componentes
entonces deberían ser
listo
ahí
nada me salvo acá
listo
bueno
listo
ahí ya vamos por paz
la caldia abre un momento
eh
Nico
o sea
has hecho rutas
páginas
o sea
stand-alone
ahora bueno
nos falta pasar algo importante
fíjate que
pues aquí nos falta hacer el request
porque el request ahora está en otro lado
¿no?
pues ahora debe estar solo en la página de products
entonces vamos a hacer
a pasar simplemente esta lógica pequeña
porque ahora la responsabilidad no está aquí
está en la página de products
¿no?
entonces vamos a pasarlo por acá
vamos a pasarlo por ahí
ahí está el http
claro
ya debería cambiar todos los
exacto
y por acá entonces tengo mi inject
porque pues ahora le cambié la ubicación
¿no?
y bueno
me tengo que importar la interfaz
bueno
las cosas de
de refactorizar
pues este
sí que los imports
empiezan
esto es una cosa que ojalá
Visual Studio Code
tuviese automáticamente
mira que a veces
ya tiene bastantes cositas
como que cuando cambian los nombres de los ficheros
los imports te los cambia
eso me parece increíble
pero ostras
esto sería increíble
o sea sería increíble
que también te moviesen los imports
que lo detectase
que dijese
ostras
lo has cortado de aquí
lo has puesto allí
te voy a
llevar el import
y te voy a cambiar la ruta
bueno
es que le meto un lamido
a la pantalla y todo
listo
entonces fíjate que acá ya hice
como el cambio
de pues de http
creo que me falta
pues aquí habíamos hecho un ng4
ah no creo que sí
ya lo puse acá
listo
entonces
fíjate que ahora
Product Component
pues ya no hace parte
ya no cargaría esto
en el set inicial
claro
sino que
todo esto
ahora
es más
el contact
que hemos creado
lo voy a cambiar
y bueno
de por sí esto
debería ser una page
lo voy a mover
y listo
entonces tenemos dos page
contact y products
y un componente
y contact
lo voy a pasar
a un
standalone
listo
entonces
listo
quiere decir que
estos componentes
que son standalone
ya no necesitan
de estar
en el módulo
simplemente
pues empieza a
pues a verse de esta manera
vamos a ver
que
en qué más
empieza a fallar
pero vamos a ir resolviendo
el problema
para eso estamos aquí
hemos hecho dos páginas
dos rutas nuevas
la de productos
de contacto
has movido
parte de la lógica
que tengamos en el componente
de producto
a la página
porque ahora
lo tenemos que hacer
a nivel de página
y además
hemos hecho que sean
los componentes standalone
para que así
no tuviéramos que importarlo
a nivel de
app module
los módulos que necesitaban
sino más a nivel de página
y esto
hace el lazy load
automáticamente
ya con lo que has hecho
o no
no
hay falta una cosita chiquita
para que haga el lazy load
y es
en vez de cargar el componente
de forma directa
te voy a dar
algo llamado
load component
vale
si quieres lo hacemos después
o sea miramos que esto funcione
y si quieres luego no
después no es que me falle
y no sé por dónde falle
no no claro
sí sí
vamos por parte
listo
listo listo
entonces vamos ahí
el router
listo
ahora todo esto inició
porque me hiciste la pregunta
perdón
de
de
el SEO
y demás
sí
es verdad
porque mi pregunta era
ostras
cómo le cambio el title
por ejemplo
a una página en angular
listo
aquí está el title
entonces
esto sería
contacto
listo
este sería el title
de la página
y acá
el title
sería productos
ya
entonces
de forma explícita
en la
en la definición
de la ruta
yo le estoy diciendo
el título
esto sería
si lo queremos así
digamos de forma
no dinámica
pero normalmente
los los titles
no son tan dinámicos
claro
pero si quisiéramos hacerlo
si existe un componente
para por ejemplo
decirle este title
y cambiarlo
ya a una forma
más programática
pero por ahora
la API
te dice
ponle el title acá
y ese va a ser el title
que va a aparecer
en la página
entonces ya tenemos
esa
esa parte como
de
de solucionado
sobre todo porque
en una single page
application es muy común
que el title se quede definido
para siempre
pero
poniendo este title
a medida que vayamos
haciendo clics
y creo que
nos faltaría hacer
como una
una
barra de navegación
pues para ir a cada línea
vale
mientras vas haciendo
la
la navegación y tal
te leo un comentario
que te va a hacer ilusión
decía por aquí
en Rudev
dice
Midu
es motivante
lo feliz que se le ve
a Nico
enseñar Angular
wow
había un montón de comentarios
en esta línea
mucha gente diciendo
oye pero que felicidad
lleva Nico
pero que genial
Nico
que bien explica
y que contento está
y la verdad es que
sí
que se transmite
ese entusiasmo
y que también se notan
las horas de enseñanza
que tienes encima
o sea que
súper bien
muchas gracias
muchas gracias
pues listo
mira que acá ya tenemos
el
pues como una navegación
y acá tenemos algo
que es el router link
que es como el componente
link de NES
pero pues acá
lo tenemos en una directiva
llamada router link
que iría a las dos páginas
en específico
ahora hice muchos cambios
vamos a ver
si nada
nada rojo por allí
vamos a ver
y si no lo solucionamos
no hay problema
vamos a ver
qué pasa por allí
de hecho la gente va diciendo
vamos Nico
Angular
nos hace felices a todos
es como aquella novia
que al principio
te empezó cayendo mal
y luego la amas
y luego
dice
los mejores profes
que Platzi
el mejor profe
que Platzi
pudo tener
todos los que le hacen
el feo a Angular
pero cuando alguien
lo explica así
quieres aprenderlo todo
grande Nico
muy genial
Angular te mejora el ánimo
sí
transmite mucho
cómo no estar feliz
decodear en Angular
dice
a mí no me gusta Angular
pero Nico es un crack
mira
ahí te he leído los cuantos
listo
fíjate que acá ocurre
algo muy interesante
y aquí empezamos
a tener un cambio
de lo que te decía
de programación modular
versus
la forma
la forma que Angular
está proponiendo
que son los
stand-downs
fíjate que
este ng-rc
lo habíamos incorporado
y lo habíamos hecho
parte
de forma global
del módulo
como que le habíamos
dicho a nuestra aplicación
oye
cualquiera
que quiera utilizar
este
ng-rc
pues ahí está
es el
ng-optimated image
pero ahora lo cambiamos
y lo que hicimos
fue que como
son
stand-down components
cada componente
tiene que
solicitar
lo que necesita
entonces como lo volvimos
stand-alone
ahora lo que yo debo hacer
es decirle
pues mira
este componente
necesita
de este
pues de esa
de esta imagen
para que lo reconozca
entonces lo empezamos
a quitar del módulo
y lo que tú me decías
de pronto al inicio
de
pero por qué ponerlo
todo en un módulo
entonces aquí por ejemplo
si este componente
como lo mencionabas
sería más granular
si este componente
utiliza el componente
ng-rc
pues lo importó
y ahora hace parte
de ese scope
pero ahora es más
a nivel de componente
que a nivel de
encerrarlo todo
en un módulo
claro ahora veo también
la desventaja
que tiene stand-alone
porque ahora
en cada uno
vamos a tener que repetir
lo de la imagen
que es algo que
nos gustaría que fuese
bastante global
global
ajá
exacto
hay unas por otras
digamos
claro
por acá tenemos también
otro error
que es el ngif
es rarísimo
que ahora angular
no nos reconozca
el ngif
y es que angular
ahora está proponiendo
la API
en donde
como se vuelve tan granulada
también veamos
si queremos incluir
este tipo de comportamientos
o el comportamiento
en ngif
el comportamiento
en ng4
que tiene sentido
en el punto de
cuando yo ya compilo
pues cada componente
cada chunk
que al final
es lo que
cuando hacemos
tweet checkable
va a ser
solo con lo que
realmente necesita
entonces ahora
por ejemplo
el error
que ahorita está
en el componente
components
product component
que hay un ngif
me dice
oye
estás utilizando
un ngif
pues también
des traerlo
entonces ahora
lo voy a traer
si no estoy mal
para traernos
como todo lo
normal
como ngif
ng4
y todo eso
llamamos al
common module
y ya con eso
ya compilo todo
y solucionamos
nuestros problemas
veamos ahora
cómo funciona
a ver
a ver
y dice
uff
acá creo que
bueno
quedó muy pegadito
sacó la
falta
me parece
ajá
exacto
eso
para que
no quede
ahí como
pegado
y tenemos
eso
para que
navegar
como bien
listo
entonces
vamos a navegar
a contact
fíjate que acá
fui al path
contact
y me registro
pues
el contenido
que estoy dentro
de contact
y
el title
que es este
que está arriba
cambiado
exacto
porque
ahora
pues
desde la definición
de rutas
hicimos el cambio
ahora
va a pasar algo divertido
en products
y empieza a fallar algo
y es como es
StoneAlone
pues ahora también
tenemos que
incluir el ng4
allá
porque ahora
cada componente
debe importar
lo que necesite
y por qué no te lo ha dicho
StoneCompilado
en tiempo de compilación
por el lazy loading
porque esto solo se carga
hasta que
pues hasta que
yo le dé click
básicamente
porque el if
lo tenías más a nivel
de todas las rutas
¿no?
y esto lo tenías solo
claro
vale vale
listo
entonces vamos a
también ponerle
el common module
a
a este
vamos a ir por acá
si
creo que viene
desde acá
tararán
entonces no importa
esto debe
venir desde el
common
si no está mal
vamos a copiarlo
de esa línea
y vamos a
traernosla
posiblemente me pase
lo mismo con el
http
vamos a ir viendo
porque el http
lo habíamos puesto
de forma global
aquí como ya
solo está
utilizando
pues vamos a ver
si funcione
si no también
lo vamos a tener
que importar
pero vamos a ver
vamos a ir solucionando
acá traigo ya
el common module
y ahora fíjate
que el http
si hizo una importación
global
y lo podemos utilizar
eso debería ser
con el componente
image
interesante
pero bueno
no hay lío
claro
hay gente por aquí
dice
¿qué ventajas tiene
entonces usar
esta analón?
pero bueno
yo entiendo que
se podría utilizar
un submódulo
para agrupar
lo que fuesen
todos globales
sí
realmente uno
ya puede empezar
a divertirse
un poco más
en cuanto a
bueno
el primer beneficio
más claro
es
el rendimiento
los chunks
como ya son
más explícitos
de qué es lo que
utiliza cada componente
pues ya puede
generar chunks
más pequeños
entonces
digamos que
el peso
de la aplicación
debería bajar
sin embargo
de nuevo
sin
de todo lo que
he enseñado
en angular
a través del tiempo
y cuando tenía
pelo largo
y todo esto
una de las cosas
que más fricción
causa
a la hora
de aprender
angular
son los módulos
y angular
está esperando
esta nueva API
decir
¿y qué pasa
si entonces
ya no tenemos
módulos?
porque
Nest no tiene
módulos
Vue
no tiene
módulos
¿qué pasa
si
no rompemos
todo
no es que
vayamos
a romper
cosas
pero
exploramos
una API
en la cual
no se necesitan
módulos
y en vez
de tener
un módulo
global
con todos
mis componentes
lo hago
al revés
tengo
componentes
pequeños
y importo
o traigo
a ellos
lo que voy
necesitando
entonces allí
lo que quiere
angular
es ver
si podemos
bajar
esa curva
de aprendizaje
ya prescindir
de los módulos
y hacer
como componentes
más sueltos
e importar
lo que se vaya
necesitando
entonces tiene
dos razones
de ser
una es
pues el rendimiento
bundles
más pequeños
y la otra
ver si este concepto
de programación
modular
ya no causa
tanta fricción
a la hora
de aprender
ánimo
visto
muy bien
entonces fíjate
que hicimos
dos cosas
entonces
hicimos
pues ahora
tenemos
pues
todo por explicar
cómo poner
el título
de nuestra
página
de forma dinámica
que al final
lo hicimos
acá
en el routing
acá con esta propiedad
pues
tenemos routing
ahora
y además
tenemos
pues los
los productos
que van cargando
de esta manera
y el título
va cambiando
de forma
pues explícita
como yo lo haya
dicho
en el routing
y segundo
pues ya está
haciendo el easy
loading
y pues
estamos explorando
la API
de standalons
que
de nuevo
ahorita
si están aprendiendo
Angular
y si ustedes son
Angular Team
por favor
digan en el chat
si son Angular Team
o si fueron Angular
en algún momento
esta es
es una versión
los standalons
esto que estamos
probando ahorita
es una
forma
un momentito más
ya vamos a jugar
va a estar ya
de Angular
y vamos al fútbol
hace bien
hace bien también
el niño
que tiene
tiene razón
¿a dónde quieres ir a mamá?
yo quiero ir a mamá
a la vez
ve
llévale
un ratito a mamá
y yo ya voy a salir
¿aparece?
pero yo quiero jugar con mamá
ve con mamá
yo quiero jugar con mamá
listo
entonces bueno
ahí está mejor
dame un momentito
esto no es tan grave
como lo de los perritos
Nico
si quieres
es que
la gana
de jugar al fútbol
es que está bien
es que
ha salido al fútbol
es que es un juego
de fútbol
pensaba que quería salir
a jugar al fútbol
a Nico JR
no le gusta
jugar
revolviéndose
de la risa
jugamos como
como un ratito
en el parque
bueno Nico
si quieres
cerramos ya
que además
hay que jugar furbo
pero bueno
nos hemos quedado
con el tema
de cómo has puesto
los títulos
el tema del easy load
lo de stand alone
ha sido brutal
o sea
primero de todo
muchísimas gracias
porque ha sido
la explicación increíble
súper detallada
súper didáctica
y además con esa cara
de felicidad
y te lo agradezco
un montón
yo he aprendido un montón
y la verdad es que
tengo que decir
que me he quitado
hasta algunos prejuicios
que tenía de Angular
ahí te lo dejo
eso es lo que queríamos
recuerda muchas cosas
recuerda
hicimos
nuestro rendering
con una sola línea
de código
increíble
tenemos
el easy load
ya implementado
tenemos un sistema
de routing
el ng4
hacer una petición
es bastante interesante
y lo que yo
también te mencionaba
Midu
en el inicio
es
los frameworks
son bastante interesantes
sin embargo
aprender las bases
aprender types
es lo que realmente
debe importarnos
un poco más
yo soy feliz
en Angular
pero también he hecho
cosas en Ness
no es como que me cierre
a la banda
y entonces solo
programo en Angular
realmente he hecho
cosas en Ness
en Platzi
por ejemplo
todo el frontend
es hecho en Ness
y yo soy desarrollador
dentro de Platzi
no solo profesor
y allí he estado
involucrado
en varias partes
del producto
en donde se hace
desarrollo con React
y con Ness
pero eso es lindo
empezar a ver
ser agnóstico
el framework
claro
y yo creo que
todo lo que sea aprender
siempre nos abre puertas
hay que estar abierto
a seguir aprendiendo
como dice Platzi
nunca pared de aprender
y yo creo que en este caso
pues oye
Angular es súper importante
es un framework
que tiene un mercado enorme
especialmente en Latinoamérica
se busca muchísimo
o sea que
creo que
está súper bien
que lo aprendáis
de hecho
aprovechando
que tenemos algo
bueno
que aquí
sepan
que
o sea
si os ha gustado
como explica Nico
Nico tiene
no sé
48.000
más o menos
que tiene un montón
de cursos
Nico
no sé dónde se pueden ver
todo tu curso
no sé si hay un enlace
sí
aquí
voy a irlo compartiendo
por acá
se llama
Platzi
pero acá
es la t-shirt
y ahí van a salir
todos mis cursos
en un momento
si esto se le da
por acá
ahí está
y ahí están
todos
todos los cursos
pues míos
dentro de
pues dentro de la plataforma
un montón
entonces lo pueden compartir
hay Python
hay Backend
hay Angular
hay Ness
Ness es muy bonito
es como un Angular
para el Backend
en fin
pero si están
enfocados
en aprender Angular
de forma
profesional
hay un
Platzi.com
webangular
si no estoy mal
o es Angular Web
o Web Angular
vamos a ver cuál carga
ahí está
donde están todos los cursos
de Angular
que hay en la plataforma
en donde tenemos
desde las partes iniciales
cómo consumir una API
ya profesional
hacer lazy loading
tenemos un laboratorio
para hacer pruebas técnicas
cómo hacer Angular
con Tailwind
cómo hacemos un clon
de Trello
esto es divertido
ah qué chulo
porque
no copiamos
solo Trello
en cuanto a
el drag and drop
sino habitualmente
implementamos
el algoritmo
original de Trello
para hacer el orden
de las cartas
qué chulo
y todo un módulo
de Unit Testing
entonces
pues aquí está
en Platzi
si lo quieren
bueno y ya ven
si ven los cursos
van a ver
que son todos
de 5 estrellas
o sea
son todos
de 5 estrellas
increíbles
y además
no para
no solo tienen
de Angular
de Python
tenías también
¿no?
estaba grabando
el otro día
cuando
así que
ya en el chat
me decían
bueno
tráetelo un día
que te enseñe Python
bueno
ya hay otra cita pendiente
2023
2023
sin ningún tipo
de duda
así que
oye
solo para
para terminar
y para preguntarte
ahí en el futuro
tenemos Quick
que lo has comentado
antes brevemente
te llama la atención
Quick
no sé
2023
¿cómo lo ves?
Angular
Svelte
React
Quick
algún nuevo contendiente
que te llame la atención
el que más me interesa
o sea
Angular sigue siendo
mi framework favorito
pero realmente
lo que está haciendo
Quick
me parece
muy interesante
este concepto
de Resumability
y como
como lo está llevando a cabo
me parece muy
muy muy interesante
he hecho algunas pruebas
y funciona muy bien
entonces como
en el 2023
espero estar haciendo
más pruebas con Quick
no sé si algún curso
en Quick
pero pues
experimentar un poco más
sobre Quick
que es una tecnología
que está muy interesante
en este momento
y Astro
Astro también está muy interesante
aunque lo estoy
utilizando más
como para sitios
como estáticos
como para blogs
y ese tipo de cosas
pero también está muy chévere
Astro
me encanta Astro
me chifla
yo cada vez lo utilizo
siempre que puedo
lo utilizo
me encanta
pues oye Nico
muchísimas gracias
gracias por haberte
pasado dos horas
dile a tu niño
que lo siento mucho
la próxima vez que te vea
te juro que te voy a llevar
un regalito
para tu hijo
por habernos cedido
a su papá
y por habernos
haberle quitado un poquito
de furbito
pero ahora le
nada
le compensas
y oye
muchísimas gracias
estás siempre invitado
para venirte cuando quieras
y déjame que te felicite
el año
que espero que el año
que viene
pues nada
todos los deseos
que tienes
se te cumplan
que se hagan realidad
y que los hagas tu realidad
que estoy seguro
que lo vas a conseguir
así que te mando
un abrazo enorme
muchas gracias Nico
por pasarte
no no a ti
feliz año también
un gran abrazo
y esperamos hacer más
de estas actividades
y compartir conocimiento
que al final
es muy apasionante
para nosotros
ojalá que sí
pues nada
cuídate mucho Nico
hasta luego
chao
pues amigos
Nico Bites
joder
menuda pedazo
de pedazo
de curso
clase
que se han pegado aquí
de Angular
el pobre
que encima
vale