Hoy vamos a hacer un tutorial de Angular 17 desde cero.
El tutorial yo, yo personalmente, me he basado, obviamente,
de hecho, vais a ver que es exactamente este tutorial que tenéis aquí.
Hay dos tutoriales que tiene la gente de Angular,
es el de AprendeAngularTutorial, ¿no?
Y aquí tengo un tutorial, lo que pasa es que lo hacen aquí en un playground,
que la verdad es que tarda mucho en cargar y todo esto.
Nosotros lo vamos a hacer en la terminal, lo vamos a hacer en el editor,
lo vamos a sacar todo esto, ¿vale?
Lo vamos a hacer fuera y yo os voy a ir explicando,
pero la guía que voy a utilizar es eso.
Por lo tanto, si queréis, por lo que sea, practicar, repasar,
seguir el tutorial, porque a lo mejor no os da tiempo, o lo que sea,
que sepáis que en este tutorial tenéis aquí todas las secciones
y vais a poder continuar revisando y continuando aprendiendo, ¿vale?
Así que si nos dejamos a medias, que sepáis que ahí podéis continuar y ya está.
Lo bueno es que lo vamos a hacer en español,
las explicaciones serán en español y ya está.
Y vamos a ver directamente la nueva sintaxis,
porque la nueva sintaxis es lo realmente interesante que tiene Angular.
Entonces, no vamos a estar revisando sintaxis antiguas,
vamos a ir directos a ver la sintaxis nueva,
cómo se haría con la nueva y todo esto.
Igual, sin querer, lo vemos y tal,
pero lo que vamos a hacer directamente es ir con la sintaxis nuevas,
porque me quiero enfocar tanto en el if, como en el for,
como en el defer, que es de mis favoritos, el defer,
el hecho de poder hacer un lazy load,
bueno, una carga diferida de un componente,
y vas a ver que es súper potente, que es increíble.
Vamos a ver enrutados, vamos a...
Sí, tengo el ojo chungo.
Es verdad que la gente me está diciendo,
¿te ha pasado en el ajo? Lo tengo en rojillo.
Me he ido a correr antes y me he dado con una rama.
Tengo el ojo bastante chungo, la verdad.
Lo tengo ahí un poco jodido,
por eso lo veréis que lo tengo un poquito rojo, ¿eh?
No os preocupéis, no es porque me he pasado a Angular,
no es que me ha pasado nada de Angular ni nada,
sino que simplemente me ha pasado eso, ¿eh?
Que me he dado con una rama y estoy dolorido, estoy dolorido.
Veremos si no pierdo el ojo.
Estoy con el sharingan del Angular, ¿vale?
Vamos a iniciar el proyecto, ¿vale?
Para iniciar el proyecto, lo primero que necesitáis
es aseguraros que tenéis la versión de Node, ¿vale?
Node, tenéis que tener la 18, recomendable,
la versión de 18, si vais a Node.js, vais a Node.js, vais...
Ah, no, la 20 es la LTS ya.
Hostia, es verdad que había cambiado la 20.
Vale, pues si tenéis la 18 funciona.
Si tenéis la 20, seguro que va a funcionar.
Pero si tenéis una antigua como la 16 o la 14,
puede ser que funcione, pero ya no la soporta.
Así que tened cuidado con esto.
Aseguraros que tenéis una versión más moderna de Node,
la 18, la 20, si puede ser, que es la LTS,
la Long Term Support, la que tiene el soporte más amplio,
a día de hoy, donde van a estar poniendo parches y todo esto,
y os actualizáis.
Yo en mi caso voy a seguir con la 18,
porque seguro que funcionan con la 18,
y si no, nos cambiaremos y ya está.
No pasa absolutamente nada.
Entonces, lo primero que tenemos que hacer
con cualquier proyecto, si queremos empezar con Angular,
¿vale?
es instalar su línea de comandos.
La línea de comandos es un paquete
que nos va a permitir crear el proyecto.
Y para eso, lo que tenemos que hacer es
npm install, npm install, menos que,
para hacerlo como un paquete global,
para tenerlo disponible como línea de comandos,
y hacemos Angular, click, ¿vale?
Angular, click, perfecto.
Esto tardaría un poco.
Si ya lo tenías instalado, pues te lo va a actualizar y ya está.
No hay ningún tipo de problema.
Yo ya lo tenía instalado, pero veis,
me lo está reinstalando.
No hay ningún problema.
Y para asegurarnos que está funcionando bien,
podemos hacer ng, ¿vale?
Version.
Y esto nos va a decir qué versión tenemos instalada.
Te aparecerá todo esto.
Angular, click, aquí, súper grande, súper bonito.
Te dice la versión que tienes de Angular,
de la línea de comandos, la versión de Node,
el package manager que estamos utilizando,
en este caso npm, tu sistema operativo,
esto la verdad es que no tengo ni idea,
y los diferentes paquetes que tienen internos,
las versiones que tenemos, que es la 17.
Nos aseguramos que tenemos la 17,
porque si haces esto y ves que tienes la 16,
asegúrate de instalar, reinstalar, actualizar,
lo que sea, ¿vale?
Pero asegúrate de tener la 17
porque si no te va a dar algún problema.
Entonces, antes de iniciar el proyecto,
te quiero comentar algunas cositas un poquito de Angular,
que están bastante interesantes.
Angular, ya sabes,
que es un framework que viene a rivalizar con Vue,
con React,
aunque React es una biblioteca,
aunque se le está poniendo cara de framework.
Angular es uno de los frameworks más importantes
que hay a día de hoy en el mundo del desarrollo web.
De hecho, hay muchísimo, muchísimo trabajo con Angular.
Mucha gente me pregunta,
ay, pero debería aprender Angular...
Claro que sí, que deberías aprender Angular.
Yo la verdad es que tú veas a alguien que no lo hace,
¿por qué motivo?
Oye, pues está muy bien,
pero si puedes aprender Angular,
aunque sea tener la mente abierta para hacerlo,
está súper bien,
porque hay muchísimo trabajo de Angular,
especialmente en empresas muy grandes,
en consultoras,
en empresas con mucho back office,
con mucho backend,
porque al final una cosa que tiene muy buena Angular
es que es un framework que te viene todo ya masticado,
ya te viene todo hecho, ¿vale?
Ya te lo viene todo, todo, todo hecho.
O sea, ya te viene preparado para el enrutamiento,
para hacer testing,
cómo tienes que hacer un estado global,
el tema de los estilos,
todo está muy bien empaquetado.
Entonces, es algo totalmente diferente
a cómo puedes encontrar en React.
React, que la idea es que es una biblioteca,
que quieres enrutado, que quieres SEO,
que quieres no sé qué,
muchas veces te tienes que ir a un framework
o instalar otras bibliotecas que te den esas cosas.
En el caso de Angular, y ahora lo vas a ver,
te viene todo muy, muy empaquetado,
muy preparado, con una guía muy clara,
todo está muy bien documentado,
es como más cerrado,
que no tiene ni por qué ser ni mejor ni peor,
simplemente es así.
Es como más cerrado, más guiado, más framework, ¿ok?
Así que tenlo en cuenta,
porque yo creo que una mezcla ganadora
es aprender React, porque hay muchísimo trabajo,
pero es que Angular seguramente le va a la zaga.
Debe ser el segundo framework más utilizado
justo después de React.
Así que si te lo estabas pensando,
no te lo pienses más y aprende Angular.
No hace falta que seas un experto,
que seas Dios, ¿ok?
Pero lo que sí que es interesante
es que no te resulte raro,
que al menos con lo de hoy,
yo creo que al menos te dará
para iniciarte y tener un tutorial
y a partir de ahí dándole cañita, ¿vale?
De los cuatro años que llevo trabajando en USA,
tres han sido con Angular.
Claro, es que hay mucho trabajo con Angular.
Así que hay que darlo.
No, Miru, te vendiste, Team Angular.
No me he vendido, no me he vendido.
No es que ame Angular y tal,
sino que simplemente es una realidad.
Yo creo que esto es objetivo
y decir cosas que no sean así,
sinceramente, no tiene sentido.
A ti te puede no gustar Angular,
pero eso no quita la realidad
que sea un framework increíblemente utilizado, ¿sabes?
Es que una cosa no quita la otra.
Pues eso sería Angular, ¿ok?
Para que lo tengamos todos claros.
Ahora que ya sabemos esto de qué es Angular,
vamos a hacer algo.
Vamos a iniciar nuestro proyecto.
Le vamos a poner ng, ya ves que ng es el comando
que vais a estar utilizando para todo,
ng, ng, ng, ng,
para iniciar un proyecto,
para levantar el proyecto,
para crear un componente,
todo, para hacer los test,
para hacer la build, todo, todo.
Hacemos ng new
y lo que vamos a decirle aquí
es el nombre del proyecto.
En este caso, Angular 17 app, ¿ok?
Que nos sirva para empezar.
Aquí nos pregunta cuáles son los estilos
que queremos utilizar en nuestra aplicación.
Si queremos CSS, S, CSS, SAS y LESS.
Aquí, sinceramente,
me gustaría que Angular dé un pedazo al frente
y que ofrezca Tailwind
y que deje de ofrecer alternativas como LESS
que ya se utilizan LESS,
se utilizan menos.
Pero bueno,
aún así,
yo lo voy a dar por CSS
porque para mí es suficiente
y ya está.
Si queremos activar el server server rendering,
esto es una cosa que es totalmente nueva
de Angular 17,
una cosa que se agradece bastante
y es que tiene de forma nativa
ya el paquete de Angular,
ya el proyecto te lo genera
con soporte para server server rendering
y static site generation, ¿vale?
Y tienes pre-rendering y todo.
Yo no lo voy a activar
porque nos complicaría temas de tiempos y tal,
pero te invito a que lo practiques
porque está súper chulo
y la verdad es que está muy bien
y a mí me parece una cosa
que le hacía falta a Angular
que antes lo tenía separado
con el paquete este de Universal,
pero por suerte ahora
es una cosa que tiene totalmente integrada.
Una vez que le decimos que no,
ya nos crea todo el proyecto,
nos está creando los paquetes,
bueno, los archivos,
los componentes iniciales
y nos está instalando
todas las dependencias.
Y ahora vamos a ver justamente
lo que es súper importante
del proyecto,
una extensión que tienes que tener sí o sí
porque si no,
no vas a poder trabajar con Angular.
Entonces, os recuerdo,
hemos instalado
la línea de comandos de Angular
en PM install menos g
para que sea un paquete global
y lo podamos utilizar
como un comando,
por eso lo podemos utilizar
justamente después.
Miramos con ng-version la versión,
hemos creado el proyecto ng-new
y el nombre del proyecto,
en este caso es la carpeta
y ahora lo que ha hecho
es preguntarnos un par de cosas,
ha creado todos los ficheros
y ya podemos abrir nuestra carpeta.
Vamos a abrir aquí con el editor
y vamos a ver
qué nos ofrece Angular,
cómo ha iniciado todo esto.
Bueno, lo primero que ya vemos
es que nos ha creado
una estructura de carpetas,
un montón de carpetas,
archivos, configuraciones y demás.
Aquí tendríamos toda la configuración
de TypeScript
y es que una cosa muy importante
que tienes que tener en cuenta
es que TypeScript
se utiliza para todo en Angular,
se utiliza por defecto.
No hace falta configurarlo,
no hace falta instalarlo,
es que viene instalado de una.
Así que ya te viene toda la configuración preparada
para que lo tengas por aquí.
Tanto esto sería para los tests,
esto sería para la app
y aquí tenemos como la configuración general.
Tenemos un Ritmi con alguna información
de cómo levantar entorno de desarrollo
y todo esto.
Tendríamos aquí el Package JSON
con todas las dependencias
ya que tenemos de Angular.
Fíjate, y esto es una cosa que es buena
y por otro lado puede ser mala,
que Angular ya te instala
un montón de dependencias por defecto
para que puedas trabajar con animaciones,
para que puedas...
Tienes el compilador, para formulario,
también el enrutado, para los observables.
Tienes también todo el tema del testing.
Es bueno porque no tienes que configurar
absolutamente nada
y esto ya te viene hecho.
Puede ser malo porque si no lo usas
lo tienes instalado,
pero bueno, no va a impactar negativamente
en el bundle hasta que no lo importes.
Así que no te preocupes, ¿vale?
Muy bien.
Aquí ya tenemos algunos scripts
que justamente utilizaremos.
Fíjate que utiliza este comando ng
que viene de Angular.
ng viene de Angular.
y podemos utilizarlos
en lugar de utilizar la línea de comandos
que habíamos visto antes
y que normalmente es mucho mejor, ¿vale?
Aquí tenemos una configuración más de Angular.
Sería como un manifest
donde habla del proyecto,
el tipo de proyecto que es,
toda la arquitectura,
dónde está toda la configuración.
Aquí tendríamos también los assets
y los iconos y todo esto.
Configuración del editor.
Esto no hace falta tocarlo,
a no ser que tengas una opinión muy fuerte
sobre algo.
Y aquí tenemos tres archivos
que está muy interesante,
especialmente en las extensiones,
porque ya te dice la recomendación, ¿no?
Y te dice, oye,
te recomiendo que instales
el Angular ng template.
Bueno, esto está muy chulo
porque ya puedes irte a las extensiones,
directamente buscar esto.
Normalmente te sale un pop-up, ¿vale?
Que te dice,
normalmente te dice,
yo lo tengo desactivado
porque es muy molesto.
Pero normalmente lo que te dice es,
oye, he detectado esta recomendación
en este proyecto,
¿la quieres instalar?
Yo la tengo desactivada,
pero si no,
si no te sale,
por lo que sea,
lo que puedes hacer es
copiarte esta cadena de texto,
te vas a las extensiones,
lo pegas aquí
y ves que aparece ella aquí.
Yo la tengo desactivada
porque no tiene sentido
que esta extensión la tenga activada
en todos mis proyectos.
No todos los proyectos
se utilizan Angular.
Y una cosa que te recomiendo, ¿vale?
Lo que puedes hacer es esto.
Una vez que la instales,
que sea esta,
Angular Language Service,
una cosa que puedes hacer
es darle a esta ruedecita
y le das
habilitar área de trabajo.
Y esto está muy chulo
porque lo que va a ocurrir
es que esta extensión
solo se te va a habilitar
en este workspace,
en esta área de trabajo.
Así que si tienes un proyecto de React,
no te va a habilitar
la extensión de Angular.
Que quieras o no,
pues igual tiene un impacto
en el rendimiento,
por poco que sea.
Yo soy un poco así,
pero bueno,
yo te lo digo
por si lo quieres saber
cómo lo puedes conseguir, ¿ok?
Muy bien.
Yo tengo desactivado Angular,
pero para siempre.
¡Qué malo soy!
¡Qué malo soy!
Yo esto,
lo que os comentaba,
lo tengo con unas cuantas.
Como podéis ver,
por ejemplo,
Markdown,
MDX,
esta la tengo desactivada,
pero la tengo activada
en algunos Workspace.
¿Por qué?
Porque las tengo instaladas,
pero desactivadas
para que no estén activadas
constantemente.
Y dependiendo
de dónde la quiera utilizar,
pues ya está.
Muy bien.
Entonces,
vamos a seguir viendo
un poco el proyecto.
El source,
el source es donde está
el corazón de nuestra aplicación.
Vamos a ver de abajo a arriba.
Estilos.
Aquí tendríamos
los estilos globales
de nuestra aplicación.
Aquí, yo que sé,
dónde vamos a tener
los estilos del root,
los del body,
estilos que van a aplicar
en toda nuestra aplicación.
¿Vale?
Aquí, luego haremos alguno,
añadiramos alguna cosa.
Luego,
el main.ts.
El main.ts
es el punto de entrada
de nuestra aplicación.
O sea,
desde este es el primer archivo
que se carga.
Este es el primer archivo
que importa estos ficheros,
que hace el bootstrap application,
hace el app component,
hace esto.
Esto es el punto de entrada
de nuestra aplicación.
Y lo vamos a ver ahora
porque justamente
como carga primero esto,
vamos a ver que aquí tenemos
la configuración
de nuestra aplicación,
aquí tenemos el componente
que sería
de toda nuestra aplicación
y lo que le estamos diciendo
es cárgame este componente,
cárgame esta configuración,
¿vale?
Y me inicializas
la aplicación
con todo esto.
Todo lo...
Me renderizas
todo el componente,
la raíz de la aplicación.
Esto es como iniciar
toda nuestra aplicación.
No lo vamos a tener que tocar
en este caso,
pero bueno,
solo para que lo sepas
y tenga la referencia.
Luego tendríamos
el index.html
que aquí,
este approot
es donde vamos a renderizar
lo que sería
la raíz
de nuestra aplicación,
¿vale?
Donde se van a poner
todos nuestros componentes,
estarán ahí.
Pero esto es interesante
porque puedes hacer cambios
en el head
si, por ejemplo,
quieres cambiar esto,
que si vas a hacer
en español,
si quieres añadir
algún campo por aquí,
yo que sé,
pues link,
rel,
un preload,
lo que sea,
lo puedes añadir por aquí
o alguna cosa
de algún estilo más
si quieres,
alguna biblioteca externa
por lo que sea
de tracking
que la quieras poner aquí,
el favicon,
nada que decir,
el nuevo logo,
los assets
y aquí ya tenemos
cosas importantes.
La carpeta app.
Aquí lo que tenemos
es el componente
más raíz
de toda nuestra aplicación,
¿vale?
Es el app.component.ts
y ya vemos
cómo se trata
estos componentes.
¿Cómo es un componente
de React?
Vamos a echar,
de React,
de Angular,
perdón,
el subconsciente.
El componente app,
este componente al final
es el que los envuelve
a todos.
Y lo que tenemos que hacer aquí
es importar component
de AngularCore,
¿vale?
Esto lo vamos a tener
porque este es el decorador
que utilizaremos aquí
como para describir
cómo va a ser
nuestro componente.
Tenemos que indicarle
cuál es el selector,
cómo es la etiqueta
que queremos utilizar.
¿Ves este app root?
Te suena,
¿verdad?
Porque este app root
lo has visto
justamente aquí.
Si yo le cambiase
este app root
y le digo app pepito,
tendría que cambiar aquí
y poner aquí
app pepito.
¿Entiendes?
O sea,
es como la forma
en la que nos vamos
a referir a este componente
en cualquier otro sitio
que lo queramos utilizar.
¿Ok?
Entonces,
¿qué más vamos a hacer?
Otra cosita que vamos a hacer
es,
esto ya nos ha puesto
por defecto
el tema de Standalone.
No voy a explicarte
todo el tema
de cómo funciona Standalone,
los modules y todo,
porque estaría aquí
todo el día,
pero te voy a hacer
un resumen
bastante rápido.
Standalone
lo que quiere decir
es que
si queremos importar
cualquier,
si queremos utilizar
cualquier componente,
si queremos utilizar
un módulo
dentro de este componente,
lo vamos a tener que poner
en esta línea 8.
¿Ves que tenemos ahora
un imports?
Pues aquí
lo que vamos a indicarle
son todos los módulos,
todos los componentes,
cualquier cosa
que necesitemos utilizar
en este componente.
Lo vamos a indicar aquí.
Antiguamente
se indicaba fuera,
¿vale?
Pero ahora por defecto,
como has visto,
digamos que ahora
es como la forma
más recomendada.
Es como la que
le gusta más
al equipo de Angular
y quiere utilizarlo
o pasarlo todo
en Standalone.
Pero,
si sabes Angular
y utilizas el otro
y te gusta más,
que sepas que sigue
siendo compatible,
no hay ningún problema.
Pero bueno,
a mí sinceramente
me gusta más
el Standalone
porque creo que hace
menos boilerplate,
menos código repetido,
menos tener que viajar
a otro componente,
ver qué tenías y tal.
A mí me gusta más,
pero no pasa nada.
Hay gente que le gusta
al otro,
no pasa nada,
tienes dos opciones,
pero solo que sepas
que ahora tienes Standalone
y a mí me gusta
porque lo tienes
aquí más cerquita
y puedes ver los impos.
Aquí el template URL
sería lo que renderiza,
¿vale?
Lo teníamos en un archivo HTML,
esto lo podemos tener
en un archivo externo
o lo podemos tener
justamente aquí.
Ahora veremos,
eso lo vamos a ir viendo,
¿vale?
Vamos a hacer
tanto la forma
de tenerlo en un archivo externo
como tenerlo aquí
en línea
y lo mismo
con los estilos,
lo podemos tener
en un archivo externo
o lo podemos tener
en línea.
Las dos formas
lo vamos a ver.
Entonces,
este decorador
que le estamos pasando
a este objeto
que describe
cómo es el componente,
este decorador,
esto es una cosa
que no es de Angular.
Un decorador
es un patrón,
bueno,
es un patrón,
es una sintaxis
y un patrón a la vez
que se utiliza
en diferentes lenguajes
de programación
y JavaScript,
aunque no lo tiene
todavía al 100%
en la especificación,
sí que lo tiene
bastante avanzado
y TypeScript
lo está implementando
por JavaScript.
Entonces,
el decorador
lo que está haciendo
es aplicarle
cierta magia
a esta clase de aquí,
¿vale?
A esta clase de aquí,
o sea,
este decorador
lo que está afectando
es a esta clase de aquí,
para que lo sepáis.
Sí,
es un patrón,
pero claro,
no solo es un patrón,
un patrón,
está el patrón decorador,
pero también,
obviamente,
existe una sintaxis.
El patrón decorador
se puede hacer
sin la sintaxis
del decorador,
son las dos cosas
a la vez,
en este caso,
¿vale?
Porque se habló de esto,
esto es un decorador
que utiliza el patrón decorador.
Entonces,
aquí tendríamos
la clase
AppComponent,
¿ok?
Que fijaos,
no hay que,
como ya el decorador
está pegado
a esta clase,
pues ya sabe
que se refiere a esto
y tenemos una propiedad
que pone
Title Angular 17 App.
Para ver cómo se renderiza
esto que está pasando
y todo esto,
lo que podemos hacer
es ir al app.component.html,
¿veis?
Aquí tenemos todo un montón
de estilo HTML
que ahora lo vamos a ver funcionando
y fíjate que tenemos aquí
un router outlet
que luego veremos
a ver qué tiene
y aquí los estilos
que están totalmente vacíos.
Ahora lo revisaremos
para que lo tengamos
totalmente claro.
Pero antes de ver
cómo funciona esto,
dos cositas.
Uno,
el app.component.ts,
que sería la configuración
de nuestra aplicación
que hemos visto antes
en el punto de entrada
ya viene inicializado
y en este caso
porque necesita
los providers
para el enrutado
que no tienes que hacer
absolutamente nada.
Fíjate que ya lo tienes configurado,
te puedes olvidar,
a no ser que necesites
tocar la configuración
por lo que sea,
añadir más providers
o lo que sea.
Que es una cosa
que si vienes de React,
los providers,
como se utilizan en React,
es envolviendo
la aplicación y tal.
En este caso,
los providers,
digamos,
los contextos
o esas cosas
que van a afectar
a la aplicación
como un todo
en cualquier sitio,
normalmente lo pondrías aquí.
¿Vale?
Como por ejemplo
en el enrutado.
Lo que tendríamos aquí,
los providers.
Y luego tendríamos las rutas
que en nuestro caso
ahora vamos a tener
las rutas vacías.
¿Ok?
Tenemos las rutas vacías.
Aquí más adelante
pondremos más rutas.
Pondremos yo que sé,
pues pondremos href,
no sé qué,
el path.
Bueno,
no sé si es path
o archerref.
Es path.
¿Vale?
Path.
Y pondríamos aquí,
pues,
about o lo que sea.
Luego lo haremos,
luego lo miraremos
y ya lo tendríamos.
Pues con esto
que ya hemos visto,
¿vale?
Ya sabemos un poco
cómo es nuestro proyecto.
Luego lo iremos toqueteando
un poco.
Vamos a inicializarlo
para verlo.
Así que abrimos
nuestra terminal.
Hacemos ng-serve.
¿Ok?
Podemos hacer ng-serve,
que sería la forma
de utilizar el comando
directamente.
Fíjate que ya me está preguntando
que si queremos que Google
bajo la privacidad política,
no sé qué,
no sé cuánto,
pues nos va a espiar
y nos va a ver
a ver qué estamos haciendo
en nuestra casa y tal.
Le vamos a decir que no.
No queremos que mejoren apps.
Y ya está haciendo la building.
¿Vale?
Entonces,
nos levanta aquí
en el puerto 4200.
Una cosa,
otra cosa que puedes hacer,
si lo prefieres,
puedes hacer ng-serve
y puedes utilizar
guión guión open.
Y esto directamente
lo que va a hacer
es abrirte
el navegador.
¿Vale?
Te lo va a abrir aquí
y ya lo tendríamos.
Esto sería
nuestra aplicación
que hemos visto hasta ahora
cómo está montada.
Sinceramente,
no es
el hola mundo
más bonito
de un framework,
aunque lo han mejorado bastante.
Creo que es un paso
hacia adelante.
Pero bueno,
al menos tenemos alguna cosa.
Vamos a limpiar
nuestro HTML,
¿vale?
Para que lo tengamos aquí
y no nos moleste tanto.
Vamos a limpiar
nuestro HTML
que tenemos por aquí,
¿vale?
Porque todo lo que estáis viendo
es todo esto
y ahora mismo
no lo necesitamos.
Así que todo esto
que vemos aquí
lo vamos a eliminar.
Si llego hasta arriba,
¿vale?
Eliminamos todo esto.
Por ahora vamos a...
Vamos...
No sé si dejaré esto.
Vale,
lo voy a comentar
solo para que lo tengamos luego.
Y vamos a poner aquí
hola Angular
por decir algo,
¿vale?
Decimos hola Angular.
¿Cómo estás tú?
¿Cómo estás tú?
¿Ok?
Bueno,
pues veis,
ya está funcionando.
Esto,
hasta aquí,
el tutorial de Angular.
Muchas gracias a todos
por...
No,
broma,
broma.
Pero estaría chulo.
Estaría chulo.
Bueno,
entonces,
¿qué es lo que hemos hecho
y cómo está funcionando esto?
Lo que hemos hecho aquí
ahora mismo es solo cambiar
lo que renderiza este componente.
Podríamos ir un poquito más allá
porque fíjate que también
teníamos aquí los estilos
app.component.css
y aquí podríamos ponerle los estilos.
Por ejemplo,
podríamos decirle,
oye,
este h1,
pues quiero que el font family
sea system UI
y que sea de color azul,
¿vale?
Y ahora,
aquí,
¿ves?
Ya tendríamos los estilos.
Luego iremos virando
el tema de los estilos
y todo esto,
pero por ahora
lo dejamos así.
Otra cosa que quiero que sepas
que es súper importante
es que a nivel de componente,
aunque por defecto
ya has visto
que te lo está creando
en un archivo aparte
y seguramente sea
la forma preferida
por muchos,
el tener un archivo aparte
para tenerlo mejor separado,
que sepas que también
lo puedes poner en línea.
O sea,
podrías poner el template
y en lugar de utilizar
el template URL,
tú haces aquí
un template string
y aquí podríamos poner
hola mundo de Twitch
y YouTube,
¿vale?
Lo podríamos poner aquí
y los estilos exactamente
lo mismo.
Podríamos poner estilos,
style
y le puedes poner
los estilos aquí directamente.
Así,
con el h1,
¿qué he hecho aquí?
Ah,
es que no es style,
es styles,
perdón,
pero no tienes naturas
de llamar la lia parda.
La lia parda,
¿por qué?
Ah,
porque he puesto aquí
otro de más,
¿no?
Vale,
ya está.
Pues styles
teníamos el template en línea
y el styles.
Entonces,
esto depende
de los gustos de cada uno.
Yo creo que para aplicaciones
muy grandes,
seguramente separarlo
a un archivo aparte
pues es mucho más cómodo
porque así separas
la lógica
de lo que se renderiza.
Pero es verdad
que hay un momento
en el que
si estás constantemente
creando componentes,
a veces es un poco rollo,
¿vale?
Estás ahí todo el rato
moviéndote de un archivo
a otro y tal.
Ahora,
por lo que he visto,
estoy viendo
que cada vez más
se favorecen
estos single file components.
Single file components
lo que quiere decir
es tenerlo directamente
todo en el mismo archivo,
¿vale?
En lugar de tenerlo
en diferentes archivos.
¿Por qué?
Pues porque básicamente
tanto Vue,
Svelte,
React,
todos están moviéndose
más a eso
que no a tenerlo
totalmente separado,
¿vale?
Pero Angular,
al final,
una de las cosas
más buenas que tiene normalmente
es de separarlo todo.
Entonces,
tienes las dos posibilidades.
No es que haya una mejor
que otra,
sino que simplemente
que tengáis en cuenta
que lo podéis hacer
y ya está.
Ahora,
vamos a...
Ya hemos visto esto
que tenemos aquí
en nuestro componente,
estamos inicializándolo,
hemos puesto esto,
la mundo en Twitch.
Bueno,
no estamos haciendo gran cosa,
pero sí que vamos a hablar ahora
de las propiedades,
¿no?
Para empezar a añadir lógica
y comportamiento
a nuestro componente,
que es lo que definen
las clases de TypeScript.
En este caso,
ya teníamos una propiedad,
¿no?
Que ponía aquí title
y ponía Angular 17
y no sé qué,
pero bueno,
ahora mismo no lo estamos
utilizando este title,
no aparece por ningún sitio.
Lo que...
Vamos a hacer una cosa,
vamos a poner city,
voy a poner aquí
Barcelona.
Fíjate que
no tienes que poner
el tipo de dato,
estamos utilizando TypeScript,
ves que tienes aquí un TS,
pero todavía no hemos puesto
ni tipos de datos ni nada
y esto es porque está utilizando
la inferencia.
Aquí está detectando
que esto es una cadena de texto
y ya te dice
que esto es un string.
Si no,
fíjate que se quejaría,
¿vale?
Se va a quejar constantemente
porque fíjate que
una cosa que ya tiene
aparte de TypeScript y tal,
te vas a dar cuenta
que Angular ya viene
por defecto
programado con su linter,
con sus reglas
y con un montón de configuración
de TypeScript
y a la mínima se va a quejar.
Así que no te preocupes
que eso está súper genial
el hecho de que constantemente
te va a estar recordando
de oye,
esto lo has hecho mal,
esto no sé qué,
esto lo has hecho regular.
Bueno,
pues ya está.
Lo puedes hacer así
y ya lo tendríamos.
Le pondríamos lo de Barcelona,
City,
Barcelona
y ahora lo que nos gustaría
es esto,
que es una propiedad
de la clase,
nos gustaría poder
pues acceder a ella.
Pues es muy fácil,
en nuestros templates
tenemos acceso
a las propiedades
que tenemos
en nuestro componente,
¿vale?
Podemos utilizar
esta propiedad
dentro de nuestro componente
y para ello
lo que podemos hacer
es evaluar
utilizando las llaves
y luego referirnos
a la propiedad.
Por ejemplo,
en este caso
pues le podríamos decir
hola mundo de,
desde,
vamos a hablar mundo desde
y aquí podríamos
las dos llaves
y dentro
nos querríamos referir
en este caso
a City,
¿ok?
Muy bien.
Si guardamos los cambios
y volvemos
hola mundo desde Barcelona.
O sea,
aquí ya ves que podemos
hacer evaluaciones
dentro de la plantilla,
¿no?
Del template que teníamos.
Entre llaves
ten en cuenta
que tú aquí
ya puedes ejecutar
también JavaScript.
O sea,
es muy parecido
al resto de frameworks,
bibliotecas y tal.
Por ejemplo,
podrías convertir esto
en un uppercase
directamente,
¿vale?
¿Ves?
Esto funcionaría perfectamente.
O podrías hacer una evaluación
y utilizar una,
uno más uno
y esto lo evalúa
y lo que te pone es dos,
no te pone uno más uno,
sino que lo que te da es el resultado
de la evaluación.
Así que ten en cuenta
que cuando utilices las llaves
lo que va a hacer
es justamente evaluar
lo que sea que estás haciendo.
En este caso
teníamos acceso
a la propiedad City
y además
podemos convertirla,
tratarla,
mapearla,
o sea,
podéis hacer evaluaciones
y ahí como podéis ejecutar
JavaScript
pues podéis hacer
lo que queráis.
Bueno,
ahora yo me estoy dando cuenta
que esto de que sea todo en blanco
a mí me molesta mucho
y estoy seguro
que todos vosotros
cada vez que estáis viendo,
cada vez que veis
que sale la pantalla en blanco
estáis pensando
¡Madre mía!
¿Ves?
Modo oscuro rápido,
please.
¿Ves?
Lo sabía.
Vale,
pues no os preocupéis.
Vamos a hacer el modo oscuro rápido.
Mirad,
¿ves que os he dicho antes
que teníamos este archivo
styles.css
y esto justamente es para tener
como unos estilos globales?
De hecho,
ya te lo pone,
puedes poner estilos globales
en este archivo.
Para poner unos estilos globales
en este archivo rápidamente,
lo que podemos hacer
es utilizar el color scheme
y le decimos
light, dark.
El color scheme,
esto es un tema de CSS,
no es un tema de Angular,
pero solo para que lo sepas.
El color scheme
lo que hace básicamente
es indicarle
al navegador
cuáles son los colores
que tiene que renderizar
por defecto.
O sea,
¿qué modos vamos a tener
por defecto
en nuestra página web?
¿Qué quiere decir esto?
Pues lo que vamos a decirle es,
oye,
en el modo dark
quiero que utilices
los colores
por defecto
en el modo dark.
Por lo tanto,
¿ves?
Ya se pone con el fondo negro
y de hecho,
si ahora le quitamos
este color red
que ya había puesto aquí
los estilos,
ya por defecto
le pone unos estilos
bastante correctos
que el texto sea blanco
y el fondo
no es negro,
pero casi,
es casi negro,
¿no?
Lo digo para que lo sepáis
porque esto está muy chulo
para que justamente
iniciéis desde un modo oscuro
mucho más sencillo
que no tener que estar
cambiando todos los estilos
a manos,
el background,
no sé qué,
no sé cuánto.
Esto lo que está haciendo
es,
son unos colores
por defecto
a nivel del navegador.
Mira,
si de hecho lo podéis ver aquí.
Si veis aquí
el color scheme y tal,
¿veis que no pone color,
no sé qué?
Esto es porque ya lo está
computando internamente
el navegador.
Si buscamos aquí
el color,
¿ves?
Este color,
¿ves?
Pone blanco
porque el navegador
ha detectado,
ah, vale,
es que también está soportando
un modo oscuro.
Vale,
pues todo pongo así.
Vale,
vamos a poner
fan family,
system UI,
margen cero
y luego arreglamos
un poco más los estilos.
Por ahora lo dejamos así,
¿vale?
Hola mundo desde Barcelona.
Bueno,
hasta aquí ya hemos visto
estilos globales,
hemos visto una propiedad,
pero si hay algo
que es clave
en Angular,
en React,
en Vue y tal,
es la creación
de componentes.
Así que vamos a crear
componentes,
¿vale?
Vamos a crear
nuestro primer componente
y vas a ver
que es bastante diferente
cómo se crean
componentes en Angular
a cómo se crean
en otros frameworks.
Ah,
dice,
¿qué es el root?
Eso no lo explicaste
en el curso de CSS.
Bueno,
hay que entender
que el dos puntos root
se refiere a un pseudoelemento,
¿no?
que se refiere a la raíz
del documento,
por eso se llama root.
Te estás refiriendo
al documento en sí.
Digamos que está incluso
por encima de body,
incluso por encima
de HTML,
porque no es una etiqueta
HTML,
se refiere exactamente
al documento
como al todo en sí,
a la raíz,
¿vale?
Por eso se utiliza
y se pone como
en la parte más arriba.
Sería como la parte más arriba
que está incluso más arriba
del HTML.
Si lo miramos aquí,
¿vale?
¿Ves?
Que aquí teníamos
una etiqueta HTML,
teníamos el body,
pues el dos puntos root
digamos que estaría
envolviendo todo esto,
¿vale?
Eso sería la idea
y al final
pues a veces
vale la pena.
Muy bien,
pues vamos a crear
nuestro primer componente
y así veremos
el tema de otra vez
lo del selector
y le vamos a dar
una vuelta a esto.
¿Cómo creamos
un componente?
Para crear un componente
lo que vamos a hacer
es ir a la terminal
porque ya ves
que Angular
tiene muchos archivos,
muchas carpetas
y que tú los tengas
que crear a mano
sería un rollazo
importante
y lo vamos a evitar.
¿Y cómo lo vamos a evitar?
Pues utilizando
nuestro comando ng.
Con ng
puedes utilizar
generate component
además que puedes generar
como te puedes imaginar
otras cosas
aparte de componentes
y aquí le vamos a decir
el nombre
de nuestro componente.
Yo en este caso
voy a decir
que sea user
por decirlo,
¿vale?
User.
Fíjate que nos ha creado
pues cuatro archivos,
¿no?
CSS,
HTML,
los test
que no he comentado
pero que también te crea
como test
obviamente básicos
porque todavía no sabe
lo que va a hacer
y el archivo
donde tenemos
la definición
de nuestro componente.
Vale,
vamos a ir a verlo
a ver cómo nos lo ha creado,
qué es lo que ha creado
y cómo lo ha hecho.
Ya tenemos una carpeta.
Esto es interesante
porque nos lo va aglutinando
en carpetas
en lugar de ir poniéndolo
en la raíz
y todo
porque al final
sería muy fácil
y muy rápido
que tendríamos alguna colisión.
Hace una carpeta
con el nombre del componente
y aquí ya tenemos
todos los archivos creados.
Si vamos a la definición,
¿qué es lo que ha hecho?
Ya importa el component,
el common module
lo está importando,
selector,
aquí tendríamos
la etiqueta
que tenemos que utilizar
para poder utilizar
este componente,
stand alone
por defecto,
por eso tenemos que tener
aquí los imports,
nos ha creado el template URL
con el HTML
que tiene que renderizar,
el style URL
y ya la definición
de la clase
que en este caso
ahora mismo está vacía
y no hay absolutamente nada.
Pero ya puedes ver
que sí que tenemos
alguna cosa aquí
en la que estamos viendo
que nos ha creado
tanto el HTML
que pone user works,
no es que sea muy útil,
el CSS está vacío,
ahora lo arreglaremos
y fíjate,
nos ha puesto test.
Angular,
esto es una cosa
que está muy chula
que verás
y que valorarás
y es el hecho
que no tienes que preocuparte
absolutamente nada
de tener que generar
tú los test,
o sea,
ya te viene todo preparado
y cada vez que generas
un usuario,
o sea,
un usuario de un componente
ya te genera los test.
Obviamente,
luego lo vamos a ver
que cuando generas
un componente
tienes diferentes flags,
como por ejemplo,
evita crear los test
por si no quieres
que se te creen los test.
Créame los templates
en línea,
¿vale?
Eso se puede configurar
y luego lo veremos
para que veamos
diferentes opciones
en cada uno,
¿vale?
Pero ya ves
que tienes test
por si muchas veces
que os cuesta,
pues ya sabéis.
Angular,
sí,
como dice Madebal,
incentiva a trabajar
con test
e incentiva un montón.
Entonces ya tenemos
dos componentes,
¿no?
Tenemos el user component
y el app component.
Ahora,
lo que vamos a querer
es justamente
que el user component
se pueda utilizar
en el app component.
Se me ha quitado
el cable,
perdón.
Vamos a querer utilizar
este nuevo componente
en el app component.
Bueno,
pues vamos a ver
cómo lo tenemos que hacer.
Lo primero que tenemos
que hacer
es saber el selector,
que es app user.
Por lo tanto,
en el app component,
si queremos utilizar
el componente
user component,
tendríamos que venir aquí,
¿vale?
Vamos a poner esto por acá,
esto por aquí
y tendríamos que utilizar
el app user.
Lo podemos poner así,
creo que así,
a ver,
así debería funcionar.
Vale,
no sé si funciona,
luego intento.
Así debería funcionar.
Así funciona,
seguro.
Pero fíjate
que ya Angular
se está quejando.
Hay algo que no le gusta a Angular.
Ya dice,
oye,
fíjate,
app user
no es un elemento conocido.
Si app user
es un componente
de Angular,
verifica que estén
los import de este componente.
Y si es un web component,
tienes que configurar
en Custom Elements Schema
para suprimir este mensaje,
¿vale?
Lo tendríamos en la configuración
para decirle,
oye,
esto es un web component,
evita este aviso
porque no tiene sentido
que yo domino esto.
Pero en realidad
no es un web component,
yo sé que es un componente,
por lo tanto,
¿qué tenemos que hacer?
¿Qué es lo que nos falta
para utilizarlo?
En los imports,
aquí tenemos que decirle
que este componente
va a utilizar
el user component.
Y ahora fíjate
que ya ha desaparecido
totalmente la advertencia.
Si guardamos el cambio de esto
y nos vamos para aquí,
¿ves?
Ya tenemos aquí
nuestro componente,
que es bastante sencillo,
ahora lo iremos complicando,
pero fíjate que ya tendríamos
nuestro componente.
Y además que lo podrías utilizar
tantas veces
como quieras.
Ahora una vez que...
A ver,
además voy a aprovechar
para esto
porque yo creo...
¿Ves?
Así también se puede hacer.
Se puede auto cerrar.
¿Ok?
Y ¿veis?
Lo podéis utilizar ya
tantas veces como queráis.
Fíjate que una cosa diferente
es que se basa mucho
más en los web components
de la plataforma,
en los custom elements.
Es como que tienes estos
selectores, ¿no?
Y tus componentes
se refieren así.
No es que tienes que exportar
la clase y al importarla
la utilizas,
sino que te refieres
al nombre del selector.
Así que es súper importante
que tengáis nombres
que valen la pena.
O sea,
que sean fácilmente
identificables.
Igual este app user
no tiene mucho sentido,
¿vale?
Pero es un poco rollo.
Es verdad lo que dice
F1812,
en lo que estoy de acuerdo,
que puede ser
que es un poco raro.
Y la verdad es que ha habido,
al menos,
esto no es mi opinión,
sino que eso lo he visto
incluso en la propia comunidad
de Angular.
Que,
aunque sí que ha mejorado
el tema de cómo se importan
y no tener que hacer
los módulos y todo esto,
es verdad que es un poco rollo
el hecho de tener
que importarlo dos veces,
¿no?
Que tienes que utilizar,
por un lado,
tienes que importarlo aquí,
lo tienes que poner aquí,
pero luego tienes que acordarte
de otra cosa.
Y hay gente que dice
que a ver si pueden utilizar,
si pueden mejorar esto.
No sé si lo harán,
pero al menos
lo han ido mejorando,
¿eh?
Muy bien.
Entonces,
ya tendríamos,
yo lo he puesto así,
¿vale?
Lo hemos puesto en línea,
pero obviamente esto
que lo habíamos puesto en línea,
obviamente podemos utilizar
de nuevo el HTML
y referirnos exactamente igual.
Si esto lo ponemos aquí,
funciona exactamente igual,
¿vale?
Tenéis las dos formas.
Es importante que,
si utilizáis la forma esta,
para que os detecte
la sintaxis que tenga
en la extensión,
si no,
os va a parecer como
un template string
y no tiene ningún tipo
de sentido.
Pero bueno,
solo que sepáis
que podéis hacerlo
con un template externo
o aquí en el propio fichero
y que se va a ver
de las dos formas
sin ningún problema,
¿vale?
Entonces,
ya hemos añadido
los imports,
ya hemos utilizado esto,
vamos a ver las directivas,
las maravillosas directivas
de Control Flow,
las nuevas directivas
que ha traído Angular
para mejorar
la sintaxis
a la hora de hacer un if
y todo esto.
Vamos a nuestro componente
app user,
voy a cerrar aquí
unas cuantas
y nos vamos al user component HTML,
¿vale?
¿Qué vamos a hacer aquí?
Pues imagínate
que yo lo que quiero ver
es si el usuario
tiene la sesión iniciada
o no la tiene iniciada,
dependiendo de algo,
¿no?
Pues lo que vamos a necesitar
primero es tener una propiedad,
obviamente,
imagínate,
vamos a tener el username
que va a ser midudev
y vamos a tener isLoggedIn,
le vamos a decir
que por defecto
pues sea true,
¿vale?
Ahora que tengo
estas propiedades
las vamos a utilizar
en nuestro template
del user.
Ahora aquí,
imagínate que
si el usuario
está,
ha iniciado sesión,
vamos a poner
bienvenido,
username,
¿vale?
Y ya está,
pero si no ha iniciado sesión,
lo que me gustaría
es enseñar más bien
iniciar sesión,
inicia sesión,
¿vale?
Inicia sesión,
mira,
eso vamos a decir en argentino,
inicia sesión,
¿vale?
Bueno,
¿cómo podemos hacer esto?
Pues con las nuevas directivas
de control flow
del if.
¿Cómo lo hacemos?
Pues nada,
tenemos que poner
la arroba,
el if,
y aquí le tenemos que decir
la condición.
Si está logueado,
lo que quiero
es renderizar esto.
Ahora,
si esto,
si está logueado,
veríamos el bienvenido.
Y si no está logueado,
lo que quiero renderizar
sería esto,
el iniciar sesión.
Ya está,
así,
así lo tendríamos,
¿vale?
Ahora no sé por qué,
ay,
perdón,
se me ha olvidado
esto,
¿vale?
Así digo,
¿por qué no me sale?
Una cosa que a mí me molesta,
al menos que he visto
un poco de Prettier,
es que a mí me gusta más
hacerlo así,
pero fíjate,
cuando guardo,
ya me formatea
automáticamente.
A mí me gustaría más que la sintaxis
se quedase así,
con este salto,
la tabulación,
pero cuando guardo el fichero,
me lo pega.
No sé si es una cosa,
yo me entiendo,
porque Prettier le acaba
de añadir funcionamiento,
¿vale?
Para que lo sepáis,
o sea,
le acaba de poner,
hace un momento,
Prettier Angular 17.
Entonces,
no sé si es que todavía
no funciona correctamente,
¿vale?
Porque veis que Prettier 3.1,
formatear Angular,
Control,
Printex,
Syntax,
y creo que en el Package JSON
todavía el Prettier,
Prettier,
es que ni siquiera estaba Prettier,
o sea,
sea una dependencia interna,
sea una dependencia interna
que vete a saber qué versión es
o lo que sea,
¿no?
Pero no sé si la utiliza,
ah,
ni siquiera la utiliza.
Pero bueno,
ya veis que no lo,
a mí me resulta raro
que lo formatea así,
entonces no sé si esto
es una cosa que arreglarán,
si es que realmente
es la forma recomendada,
pero me sorprende bastante.
Pero bueno,
solo que lo sepáis,
que no es que a mí me guste así,
sino que cuando lo guarda
me lo deja así.
Pero bueno,
lo vamos a dejar así
porque así es como lo hace por defecto
y así no le he dado ningún problema
de que está constantemente
cambiándolo y tal.
Entonces,
si volvemos,
fíjate que ahora aquí,
bueno,
voy a cambiar los estilos
en el User Component este
y os voy a enseñar
una cosa bastante interesante
porque fíjate que ahora sí
pone aquí lo de
bienvenido a mi DUDEP,
esto es porque esta condición
se cumple y por lo tanto
entra aquí,
pero si esto lo pasamos
a false,
guardamos y vamos aquí,
¿ves?
Me dice inicia sesión.
O sea,
hemos hecho un renderizado
condicional de toda la vida,
un if,
pero lo hemos hecho
con la sintaxis nueva.
¿Ok?
Ahora,
como los estilos
están un poco raros
que está arriba a la derecha
y es un poco molesto,
vamos a hacer otra cosa.
Vamos,
el User este
lo vamos a envolver
en un section,
¿vale?
Lo vamos a poner aquí
en un section,
así también me lo pone
un poquito más así
y el section este
lo vamos a render,
lo vamos a mejorar un poco,
vamos a poner un max width,
500 píxeles,
lo vamos a centrar,
le ponemos un poco
de padding top
para que no moleste
que esté pegado
y le subimos un poco
la fuente,
¿vale?
El hola mundo
desde Barcelona
lo vamos a quitar
del app,
que esto no lo vamos
a quitar más.
Este hola mundo
esto lo quitamos,
por ahora solo renderizamos
esto,
¿vale?
Y guardamos los cambios
y ¿dónde está?
Ah,
porque al final
lo he dejado aquí,
¿no?
Ah, ¿no?
Ahora, ya está.
Vale, pues por ahora
lo dejo así
con inicia sesión
y ahora
ya lo continuamos aquí.
Lo vamos a poner en true
que queda más bonito
con el bienvenido
y ya está.
Vale,
entonces,
una cosa importante
sobre los estilos.
Fíjate que yo he cambiado
los estilos
del componente user
y aquí
me he referido
al section
sin necesidad
de referirme
a la clase,
a una idea,
absolutamente a nada,
¿no?
Fíjate que aquí
hay un section
y en el componente user
y en el CSS
le he hecho un section.
No estoy utilizando clases,
no estoy utilizando nada,
pero lo interesante
que tiene Angular
y por eso digo
que viene muy bien
encapsulado
con muchas cosas
es que
si tú ahora miras
aquí los estilos
y los inspeccionas,
te vas a dar cuenta
que este section
no tiene ni siquiera
un class name,
sino que tiene un atributo
un poco chungo,
la verdad,
que pone ng-content,
ng-c10,
no sé qué,
no sé cuánto.
Y si le das un click,
fíjate que aquí
tiene los estilos
y los ha hasheado
automáticamente
por ti.
O sea,
no has tenido que hacer
absolutamente nada,
no te has tenido que preocupar
de hashear,
de importar,
de no sé qué,
sino que lo ha hecho por ti
mágicamente.
Un poco como lo hace Svelte,
pues algo parecido.
Así que nada,
ahí podéis ver
que no vais a tener problemas
a la hora de estilar
directamente
refiriéndoos
a un elemento HTML.
Muy bonito,
pero un poco mala práctica
acostumbrarse a eso.
Mala práctica.
Yo la verdad
no lo veo mala práctica,
¿no?
Porque sinceramente
el framework ya te está
de alguna forma,
o sea,
es una feature del framework.
A mí no me parece
que sea mala práctica.
Lo que me parecería
mala práctica
es no aprovecharlo
y empezar continuamente
a hacer clases
muy complejas,
¿no?
Cuando realmente
tiene sentido
aprovecharse de eso.
Lo que puede ser mala práctica
es acostumbrarte a eso
y llevarlo a un sitio
que no lo tenga.
Entonces lo puedo llegar a entender,
pero bueno,
no sé.
Menos mal que hacía 5 años
que no tocaba.
No, hombre,
pero estamos haciendo
cosas muy sencillas
hasta ahora, ¿no?
Qué bello que es Angular.
La curva es un poco más alta.
Sí, la verdad es que es un poco más alta
y que genera...
Yo creo que genera
mucho rechazo al principio
porque tiene muchos archivos,
muchas cosas y tal, ¿eh?
Mido,
no sé si estoy drogado.
El título dice
que vas a hacer tutorial de Angular.
Lo estoy haciendo.
Lo estoy haciendo
y con un ojo chungo, ¿eh?
Fíjate,
que tengo un ojo chungo
que me he dado como una rama
y tal.
Muy chula la nueva directiva,
pero ojalá me fueran
mis dedos
la mitad de rápido
que a ti.
Bueno, ya.
Ya viene con SSR por defecto.
Lo hemos comentado al principio,
lo cual es brutal, ¿eh?
Mirad,
vamos a hacer otro componente.
NG,
Generate,
¿ok?
Component
y el nuevo componente,
yo qué sé,
Games.
Vamos a hacer uno de juegos.
Entonces,
os he comentado antes,
de hecho,
podrías poner Help
y fijaos que aquí tenéis
como un montón de opciones.
Por ejemplo,
que sea interactivo
y os va preguntando,
os va diciendo,
vale,
esto,
lo que es así,
lo que es así,
Dry Run.
Este está muy interesante.
No sé si conocéis
el concepto de Dry Run,
pero es muy,
muy interesante
y no tiene nada que ver
con Angular,
sino que es sobre programación.
Un Dry Run,
¿lo habéis probado alguna vez?
¿Lo habéis entendido?
¿Alguna vez lo que hace?
Mirad,
un Dry Run
lo que hace
es simular
que lo está ejecutando.
¿Veis?
Lo ejecuta
y te dice
lo que haría,
pero no lo hace.
Entonces,
si yo ahora voy
a buscar este archivo,
no está.
No está.
Y esto es algo
que funciona
con un montón de comandos
de terminal,
en un montón de sitios.
Yo que sé.
Hay tantos,
tantos sitios.
Babel,
Babel,
por ejemplo,
también lo hace.
Hay muchos comandos
que tienen este formato
Dry Run
que te sirve justamente
como para entender
cómo funcionaría.
Está súper chulo.
Por ejemplo,
también lo que os hemos comentado
antes.
¿Ves?
Podríais hacer Skip.
Por ejemplo,
si no queréis
crear los test.
¿Veis que aquí
me los hubiera creado?
Si tú le dices Skip test
y le pones el Dry Run,
vais a ver que te dice,
vale,
pues yo hubiera generado
estos tres,
pero no te los ha generado.
Te dice,
esto significa
que no se han hecho cambios.
Y está muy bien
pues para ir probando
y entender
cómo funciona cada cosa
sin liar la parda.
¿Vale?
Mira,
por ejemplo,
a mí normalmente
me gusta más utilizar
Inline Style
y Inline Template
para no tener que estar
haciendo cambio
todo el rato.
Pues podríamos hacer aquí
que utilice
Inline Styles
Inline Template
y con esto
Inline Style,
perdón.
Es un poco raro
que a veces es Style
y a veces es Style,
¿no?
Pero fíjate,
ahora solo me crearía
un archivo.
Ahora que ya sé
lo que me va a crear,
pues voy a decir,
vale,
pues ahora le voy a crear,
voy a quitar el Dry Run
y me voy a asegurar
que hemos creado
solo un archivo.
Y con esto
ahora sí que lo tengo aquí.
Es muy interesante
el concepto de Dry Run.
Es un concepto
que es muy típico
en el mundo del software
y te recomiendo
un montón que lo conozcas
justamente por esto.
Vale,
pues ya tenemos
nuestro nuevo componente,
le he llamado
Games Component.
Vamos a poner aquí
unos jueguecicos,
yo que sé,
vamos a poner
ID1
Name
Uncharted
Uncharted 4.
Vale,
imagina que tenemos
una colección de juegos
Name
el Horizon
Zero
Dawn,
¿vale?
Y el ID3
y vamos a poner
el Bloodborne,
¿ok?
Tenemos estos tres juegos
y obviamente
una vez que tienes tres juegos
pues lo que quieres
es mostrarlos,
¿no?
Bueno,
pues lo vamos a mostrar
y no es difícil,
esto sería un HTML
que teníamos por aquí,
¿vale?
Y lo que vamos a hacer
es utilizar
la nueva directiva
for,
es una directiva
que ha salido
en Angular 17.
Para utilizar la directiva,
mira,
esta sería la forma
interesante,
mira,
esta sería la forma
antigua básicamente.
Bueno,
no teníamos
el router link
este,
no lo tendríamos,
algunas cosas
que son un poco
ahí polémicas,
pero bueno,
imaginad
que sería algo
más o menos
por decir algo,
¿eh?
Algo así,
¿no?
Bueno,
pues esto
sería la forma antigua.
La forma nueva
sería utilizando
las directivas
de otra forma,
utilizando el for
de esta forma,
¿vale?
No tendríamos que poner
el elemento HTML
y tenerlo
como un atributo,
sino lo que haríamos
es utilizar el for
y aquí le tendríamos
que poner la condición,
¿vale?
Quiero que me iteres
de game of games,
¿vale?
Fíjate que aquí
fallo bastante común,
aunque te va a avisar Angular,
no hay que poner un let,
¿vale?
No hace falta,
simplemente tienes que decir
game of games,
no hace falta que le pongas
el let,
no tienes que poner nada
y aquí
tienes que indicarle
cuál es el identificador,
¿vale?
Tienes que decirle
quiero que traques
el game ID,
¿vale?
El identificador único.
Esto es algo parecido
a las keys de React
y esto lo necesita
porque cuando está,
básicamente,
cuando estamos iterando,
para poder tener el control
de comparar los elementos
cada vez que se actualiza
cada uno de esos elementos,
pues necesita tener
un identificador único,
si no lo que vamos a tener
es el típico problema
de que si borras un elemento,
utilizas el índice,
entonces hay problemas
de renderizado y tal.
Por eso,
con esto,
va a poder tener
ese control
de cada uno de los elementos
y cada vez que se cambien,
saber exactamente
cuál es el que ha cambiado,
¿vale?
Muy bien,
y ahora aquí,
pues nada,
una lista del game name.
Con esto,
ya estaríamos iterando
el for,
la condición no,
más que la condición
sería lo que queremos iterar,
el juego de los juegos,
este games,
es la propiedad
que tenemos aquí
y utilizamos el track
y le indicamos
cuál es el identificador único
de cada uno
de los elementos,
¿vale?
En este caso,
el game.id.
Aquí tenemos
el identificador único.
Para que veáis
que el identificador único,
que había muchos jajas
con React,
había muchos jajas
con React
y al final,
pues ya veis
que aquí también
pasa y es normal,
o sea,
tiene todo el sentido
del mundo
por cómo funciona internamente.
Muy bien,
con este cambio,
ahora,
pues imagínate
que queremos ir
de nuevo
a utilizar esto.
¿Dónde lo podríamos utilizar?
Vamos a utilizarlo
en user,
¿vale?
Nos vamos aquí
a utilizar
nuestro componente
app games,
pero este componente
app games,
¿veis?
Ya se me queja,
no es un componente conocido
porque tenemos que ir
al TS
y aquí en los imports
tenemos que importar
el games component.
Y ahora cuando lo guardemos,
ahora sí que lo conoce
y si volvemos aquí,
ahora sí que vemos
que os demos aquí.
Vamos a ponerlo
dentro del section
para que quede
bien juntito
y ya tendríamos ahí
Uncharted 4,
Horizon Down
y Blockboard.
¿Ok?
Ahora,
normalmente esto está muy bien,
pero ¿cuál es el problema?
Que hasta ahora
estamos viendo componentes
un poco aburridos
y nos gustaría tener
alguna forma
de vincular datos
entre componentes
y lo interesante
de Angular
es que
a diferencia de React
que es
One Data Binding,
o sea,
que solo va hacia un lado
la data,
Angular va hacia los dos.
Puede ir
de input y de output,
o sea,
tú le puedes pasar una prop,
pero también puedes pasar
como hacia arriba,
le puedes pasar al padre
información.
Vamos a ver el primero
que es el más fácil,
pero antes
os voy a enseñar
la propiedad
del Property Binding,
sí,
os voy a enseñar
la técnica esta,
que esto es un momento
y así luego pasamos
a otro.
O sea,
vamos a ver
cómo reflejar
cambios dinámicos
en una,
bueno,
me lo voy a saltar
porque lo vamos a hacer después,
lo hacemos después
y ya está,
no pasa nada,
sí,
lo hacemos después,
sí,
os voy a enseñar
cómo hacer el Property Binding,
pero vamos a pasar
a los eventos
y así os enseño
el Property Binding
dentro de los eventos
y ya está,
y así lo haremos
más rápido.
Mirad,
vamos a ver
estado y eventos,
cuando haces un clic
y todo esto
porque al final
nuestras páginas
tienen que ser interactivas
y ahora mismo
lo único que estás viendo
es que estamos enseñando
información y ya está
y necesitamos darle
a nuestros desarrolladores
una forma que pueda hacer
que los usuarios
cuando hagan clic
hagan cosas,
¿no?
Bueno,
vamos a hacer algo,
vamos a ir aquí
a nuestro usuario
y voy a hacer uno
muy sencillo ahora mismo.
Vamos a ir al User Component
y aquí en el Bienvenido
vamos a tener una imagen,
voy a poner
que esto es una foto,
¿vale?
Vamos a poner Source
y mira,
te voy a enseñar un trucazo
que a lo mejor no sabías
pero si quieres sacar
el avatar de alguien
de GitHub
puedes hacer esto
nombre de usuario
.png
y con esto
ya lo tendríamos.
¿Ves?
Que aquí ya me lo ha cargado
y esto funciona
con cualquier usuario.
Si tú pones
geekhab.com
barra
decime un usuario
yo que sé
feral.png
pues ves
aquí tenemos al bueno
de feral.
Más guapo
pues esto es un trucazo
que muy poca gente se sabe.
Bueno,
imagina que tenemos aquí
una imagen
que obviamente
se renderiza aquí
bastante grande
la imagen
la hacemos un poquito
más pequeñita
¿vale?
Vamos a poner
32,
bueno,
64 píxeles
64 píxeles
border radius
del 50%
¿vale?
Y lo que vamos a hacer
con esta imagen
vamos a decir
bueno,
cuando se hace click
quiero que ocurra algo
¿vale?
Quiero que pasen cosas.
Pues por ejemplo
podrías poner click
y fíjate
cuando tú abres aquí
ya los paréntesis
ves que ya tienes
como un montón de eventos
abort,
animation end
tienes todos estos eventos
y es que cuando abres
los paréntesis
justamente es cuando
te salen todos
los eventos
de ese elemento
tendrías los clicks
el double click
tendrías move
move
tendrías resign
reset,
scroll
lo que tú quieras
en este caso
vamos a utilizar
ves
tenemos double click
auxiliar click
el click normal
en este caso
vamos a utilizar el click
vamos a hacer algo sencillo
lo único que vamos a hacer
ahora mismo
es enseñar un alert
ahora lo complicaríamos
un poco
pero por ahora
vamos a hacer esto
¿vale?
pero fíjate que siempre
que intentas utilizar
una propiedad
es que Angular
está en todas
dice esta propiedad
no existe en el user component
¿esto qué quiere decir?
pues que es que en el user component
es donde vamos a tener la lógica
así que tenemos que volver aquí
a nuestro user component
este de aquí
¿vale?
y asegurarnos
que tenemos un método
que realmente haga algo
cuando
cuando
hagamos el click
ahora veremos
que ya no se queja
¿vale?
porque ahora sí que está detectando
y fíjate que incluso
le detecta los tipos
entonces
este cuando hace un click
ejecuta
este método grid
que es el que tenemos
justamente
aquí
¿vale?
vamos
nos vamos a nuestro navegador
le damos aquí
¿vale?
y ya tenemos aquí
cómo funcionan los clicks
esto está bastante bien
pero
vamos a ver
cómo cambiar un estado
porque una cosa muy interesante
que tiene Angular
con los estados
es que son absurdamente sencillos
son tan sencillos
que dan hasta miedo
o sea
y es una cosa que está
muy pero que muy bien de Angular
mira
imagínate
que aquí en el user component
ves que pone aquí
inicia sesión
¿vale?
pues vamos a ponerle un botón
para que pueda iniciar sesión
¿no?
le vamos a poner aquí un click
y vamos a decirle
directamente
podríamos
o ejecutar un método
por ejemplo
log user
¿no?
podríamos hacer esto
pero aquí directamente
incluso lo que podrías hacer
es cambiar
el isLoggedIn
que teníamos aquí
esta propiedad
que tenemos aquí
que la tenemos a true
por defecto
vamos a ponerla false
por defecto
esta propiedad
que tenemos aquí
la podríamos directamente
pasar a true
¿sabes?
le podríamos decir
no
pues vamos a hacer
podríamos hacer
que cuando hagas click
y no hace falta
que hagas como
una función
que se ejecute
no
directamente lo que le decimos
es pasa
este isLoggedIn
me lo pasas a true
no tienes que hacer
absolutamente nada más
lo podrías hacer
podrías hacer el método
la función
lo que tú quieras
de hecho normalmente
puede ser mejor idea
pero solo para que sepas
que esto también se puede hacer
¿no?
y con esto
fíjate lo que va a pasar
que le doy
y ya
ha cambiado
ya se ha renderizado
automáticamente
o sea
esto
está funcionando
como un state
o sea
está funcionando
como un estado
porque fíjate
que cuando yo le he cambiado
el valor
cuando le he dado click
al isLoggedIn
lo que ha pasado
es que sin yo decirle
que esto es un estado
sin absolutamente nada
lo que ha pasado
es que ha dicho
vale
como esto
ha cambiado el estado
y el isLoggedIn
ha pasado
esta propiedad
ha pasado a true
me he vuelto a renderizar
y ahora este if
como sí que cumple
pues he entrado por aquí
esto es una cosa
que está muy chula
la verdad
¿ves?
está muy chula
y que es una cosa
que estaría maravillosa
en otros frameworks
en Svelte
por ejemplo
se pasa
pero se renderiza
solo ese componente
o toda la página
bueno
eso lo podemos ver
de diferentes maneras
para que lo veamos
si renderizamos esto
y nos ponemos por aquí
fíjate
aquí tendríamos
ves que pone el P
el button
el no sé qué
no sé cuánto
si te fijas aquí
cuando algo cambia
vale
fíjate lo que ha cambiado
lo que ha cambiado
solo ha sido
la parte del componente
vale
o sea
solo ha cambiado
la parte del componente
la parte del section
no ha cambiado
todos los usuarios
de hecho
no ha cambiado
los juegos
tampoco los ha cambiado
solo cambia
la parte que tiene
tiene sentido
porque si no
no tendría sentido
que lo cambiase todo
de golpe
te imaginas
que se pone a cambiar
de cosas que no esperas
no no tiene sentido
solo cambia allí
donde digamos
que tiene scope
y hacia abajo
obviamente
porque a lo mejor
tiene que propagar
estos cambios
pero en este caso
no es toda la...
pasar de React a Angular
y ver esas magias
que se hacen sola
te dejan así
ojo boca a ojo
boca a ojo
ojo boca
ojo boca a ojo
me encanta
vale
ahora
imagina que le queremos
pasar una propiedad
a nuestro componente
AppGames
que por cierto
un tema interesante
cuando si hacéis
comando click
veis
directamente podéis ir
al componente
aunque parezca raro
porque esto es un elemento
pero sí que está
enlazado correctamente
con el componente
de TypeScript
vale
o sea con toda la información
de TypeScript
y todo esto
entonces
aquí tendríamos
como pasar
información
imagínate que en este Games
pues yo le quiero pasar
yo que sé
el username
vale
le queremos pasar el username
el username
de esta forma
porque tenemos aquí el username
se nos queja
porque fíjate que el username
me dice
oye
es que esta propiedad
no existe
entonces tenemos que ir
a nuestro componente
de user
y asegurarnos
aquí
nuestro componente
de user
tenemos que asegurarnos
que tiene un username
pero no es tan fácil
como esto
vale
no es
no es tan fácil
como
ah no
este
en el Games
perdón
que está diciendo el username
pero es en el Games
que es este de aquí
vale
no es tan fácil
como hacer esto
vale
no es tan fácil
como hacer esto
esto no funciona así
porque fíjate
que todavía se está quejando
para indicarle
que queremos tener
como una comunicación
entre componentes
que le queremos pasar
como un atributo
o una propiedad
hacia abajo
lo que necesitamos
es indicar
que esta propiedad
utilice
el decorador
input
vale
y lo que le vamos a decir
con este input
es
oye
te estoy informando
que el componente
games component
como input
se le puede pasar
un username
que le podrías pasar
por ejemplo
que sea de tipo string
vale
y que tenga el valor
por defecto
bueno
si le puedes el valor
por defecto
ya vas a ver
que es un string
pero le puedes decir
que sea un string
y ya está
entonces
lo que le vamos a pasar
fíjate que ya
no se me queja
ahora le podríamos pasar
el username
y ya lo podrías utilizar
aquí dentro
podríamos poner
que estos son
los juegos
favoritos
de
el username
y ahora
si vamos a nuestro componente
podremos ver
no sé por qué
pasaba ahí
vale
ay
porque no me aparece
a ver
no es una
no
no
app games
pero se lo he puesto aquí
use a name
a ver
espérate
que es que hay un fallo aquí
ah
coño
ves
ves
ves
esto es un rollo
esto es un rollo
que a veces
a veces
me olvida
que a dos por tres
que es esto
que hay que importar
el componente
que quieras
esto
la verdad
es que esto
es una cosa
que a mí
particularmente
me cuesta
muchas veces
porque
como ya lo utilizas
aquí directamente
dices
bueno pues ya está
si lo estoy utilizando aquí
pero es verdad
que a veces me pasa
automáticamente
seguro
no no
no son las llaves
ya la gente
las llaves
las llaves
no
el tema es
que lo que pasaba
luego lo
luego lo hacemos
con los corchetes
que es lo que os comentaba
te cuesta o no te gusta
no
en este caso
las dos cosas
me cuesta
y no me gusta
me cuesta
porque
lo que pasa muchas veces
es que
se me olvida
se me olvida totalmente
que tengo que poner
el tema este
del import
y todo esto
pero espérate
que todavía hay alguna cosa
el username
y fact games
pues todavía
se me está quejando
a ver
que está pasando
que está pasando
ah es que
lo importa
donde no es
perdón
esto
esto no es aquí
y este
ah pero sí que
está importado
correctamente
no
sí que está
o sea sí que está
sí que está
sí que está importado
perdón
sí que está importado
no sé por qué
creo que ha habido un error
de ha habido un momento
que tenía mal la sintaxis
se ha vuelto loco
se ha quedado el fail
ahora está bien
y veis
ahora sí que funciona
correctamente
y está aquí
creo que me da la sensación
que se ha quedado
un momento penchado
he pensado
que ha sido el import
que se me ha olvidado
pero no
el import ya lo teníamos aquí
veis
está aquí el games component
o sea que ya estaba bien
o sea que estaba todo bien
el tema es que no sé
por qué se ha quedado penchado
pero veis
los juegos favoritos
de midudev
bueno
ya le hemos pasado la propiedad
y ya lo tendríamos
¿vale?
esta sería la comunicación
de padre a hijo
alguien me decía
que estaba mal
la sintaxis del input
pero el decorador es así
o sea es
arroba input
y se le tiene que poner
también como los paréntesis
no estaba mal
la sintaxis del input
o sea es así
esta sería la fácil
porque será la del input
pero se puede hacer
otro tipo de comunicación
que es un poquito más compleja
entre componentes
que sería al revés
que sería de hijo a padre
o sea se le puede hacer
una comunicación
de hijo a padre
por ejemplo
que tú puedas
clicar un elemento
aquí
y avisar al padre
que has clicado un elemento
pero fíjate
que como se hace
en React
por ejemplo
que es pasarle un callback
aquí no se hace
aquí se utiliza
otra estrategia
totalmente diferente
que sería utilizando
el output
¿no?
imaginad que aquí
cada vez que clicamos
¿vale?
vamos a hacer aquí un clic
clic
y que yo que sé
cada vez clicamos
vamos a poner
que tenemos un favorito
¿vale?
guardamos en favoritos
el game name
y vamos a avisarle
al padre
que hemos puesto
este juego en favorito
¿vale?
entonces
¿qué es lo que tenemos
que hacer aquí?
primero
obviamente
necesitamos ese método
fab
que hemos utilizado ahí
pues ponemos fab
le decimos
el game name
que va a ser un string
y aquí
aquí podríamos hacer un alert
esto sea lo primero
que podríamos hacer
solo para ver que funciona
¿vale?
a mi dudel
le gusta jugar a un charter 4
¿vale?
pero no quiero hacer esto
lo que quiero es avisarle
al padre
al componente padre
que mi dudel
le ha dado clic aquí
bueno
pues tenemos que poner
un output
y este decorador
vamos a utilizar
add favorite event
y aquí creamos
con el event emiter
event emiter
¿vale?
que lo importamos
de angular core
¿ves?
tenemos que importar
event emiter
input y output
también son decoradores
que se importan
de angular core
creamos el event emiter
le decimos
que vamos a pasarle
un string
y este
esto
es que hay que hacerlo así
para poder pasar el evento
porque te tienes que poder
suscribir directamente
desde el componente padre
¿vale?
esto lo dejaríamos aquí así
solo que este alert
vamos a utilizar este
add favorite event
y vamos a emitir
el evento
pasándole
el nombre del juego
que le ha gustado
a mi dudel
voy a repasar esto
para que no tengan
ninguna pérdida
¿vale?
porque esto es bastante importante
mira
en este
cada uno de los elementos
que renderizamos
cuando hacemos clic
llamamos al método
fab
y le pasamos
el nombre del juego
imagínate
que le damos aquí
a un chart 4
pues le estaríamos pasando
a un chart 4
¿vale?
y luego aquí
en la clase del componente
tenemos
por un lado
utilizando el decorador
output
tenemos una propiedad
add favorite event
y creamos un nuevo
event emiter
y le indicamos
el tipo que vamos a pasar
¿vale?
le indicamos
que le pasaremos
un string
en el método fab
que es el que
cuando hacemos clic
le pasamos el nombre
del juego
lo que hacemos
es utilizar este
add favorite event
que hemos creado
como un event emiter
como es una propiedad
de la clase
tenemos que utilizar
el this
el this
que se refiere
a la instancia
de la clase
add favorite event
punto
y emitimos
el evento
que estamos creando
que cuando lo emitimos
le pasamos la información
que queremos
que en este caso
es el juego
que favorito
el que hayamos clic
¿vale?
ahora
esto es solo la mitad
porque todavía nos falta
la parte del padre
que por suerte
bueno
te voy a decir
que por suerte
no es tan complicada
pero es un poco
vamos por partes
no te preocupes
primero
vamos a necesitar
este sería el padre
el app user
¿vale?
porque fíjate que en el app user
es el que utiliza
el games component
y es el que renderiza
la lista de juegos
lo primero que necesitas
es una propiedad
donde vas a guardar
la información
así que vamos a poner
el fab game
lo vamos a poner aquí
tenemos un stream vacío
y ya está
por otra parte
necesitamos un método
que le vamos a llamar
getFavorite
que cuando recuperemos
el favorito
haga algo
bueno pues vamos a recuperar
el favorito
y vamos a cambiar
la propiedad
fabgame
le vamos a
indicar
que el juego favorito
es el que haya llegado
a este método
ahora sería la parte
esta sería la parte
de la lógica
en el componente
pero ahora
nos falta
la parte también
en el template
así que nos vamos
al template HTML
del user
lo teníamos aquí
y aquí
lo que tendríamos
que hacer
es en el app games
que hasta ahora
solo habíamos pasado
hacia abajo
el username
ahora
nos vamos a suscribir
a un evento
igual que nos hemos suscrito
antes al click
ahora también
nos podemos suscribir
a un nuevo evento
que se llama
efectivamente
addFavoriteEvent
fíjate
que mientras que
los elementos HTML
te puedes suscribir
a eventos
como el click
el scroll
el resize
y tal
en los componentes
de Angular
cuando tú
haces este output
fíjate que cuando
abres los paréntesis
te sale aquí
addFavoriteEvent
o sea ya ha detectado
que tienes uno
de tipo output
y que por lo tanto
te puedes suscribir
y al suscribirte
tú aquí puedes hacer
lo que te dé la gana
¿qué es lo que queremos hacer?
llamar a nuestro método
getFavorite
que es el que va a cambiar
el estado
del juego favorito
y aquí
nos tenemos que referir
al evento
que le llega
¿vale?
a la data
del evento
que le llega
así
en este
getFavorite
que es el que hemos creado
aquí
le va a llegar
este GameName
que es el mismo
que le estamos pasando
aquí
¿vale?
cuando emitimos
este GameName
le llega
aquí
¿vale?
y esto
es como nos estamos
refiriendo
con este
$Event
a la información
del evento
¿ok?
así que con todo esto
y ahora un poco más
porque vamos a ponerle
aquí un if
para hacer otro if
¿vale?
vamos a poner
si el faggame
es diferente
si es diferente
a una cadena vacía
por ejemplo
tu juego favorito
es tal
¿vale?
muy bien
vamos a ver
si todo esto
que hemos hecho
funciona
vamos a ver
ponemos por aquí
ponemos por aquí
bueno
todo podemos quitar
lock in
¿vale?
tu juego favorito
es un chart de 4
horizon down
block board
es un ejemplo sencillo
porque alguien diría
bueno
pero porque esto
no lo haces en el mismo componente
y te quitas todo este problema
tienes toda la razón
pero
la idea es que
siendo un ejemplo sencillo
entiendas un poco
como es la comunicación bidireccional
con el input
lo que le podemos pasar
son datos de padre a hijo
¿vale?
como si fuese una propiedad
que le pasamos
pero con el output
tenemos una cosa muy interesante
que lo que le podemos hacer
es pasar la información
de abajo a arriba
de hijo a padre
o sea
le podemos informar
de algo que ha ocurrido
dentro de nuestro componente
y
influir al padre
en este caso
fíjate
que cuando tú le das
estás influyendo en el padre
y estás haciendo
que se re-renderice
con una información
que en realidad tenía el hijo
en lugar de tener que utilizar
callbacks
y todo esto
¿no?
es interesante
obviamente
hay un montón de alternativas
porque al final
podrías utilizar
podrías utilizar una store
podrías utilizar
podrías hacerlo
de mil millones de maneras
lo puedes llegar a hacer
hasta con directivas
puedes hacer un montón de cosas
con servicios
lo puedes hacer también
pero lo que es más importante
es que entiendas el concepto
de output
el de input
y el de output
porque eso sí que lo vas a poder
reutilizar
ya sea extrayendo la lógica
o no extrayéndola
para cualquier otra cosa
¿vale?
y eso sí que son cosas
que son bastante básicas
más de Angular
¿vale?
ahora
ahora te voy a enseñar
yo creo que una de las cosas
que más
más
más
me ha gustado
de Angular 17
para mí
sin ninguna duda
lo mejor
el differ
la carga diferida
de datos
en Angular
y de componentes
y todo esto
¿vale?
yo creo
sin ninguna duda
que es increíble
que me encanta
porque
de una forma
súper sencilla
puedes hacer cosas
súper súper potentes
así que te lo voy a enseñar
y para enseñártelo
vamos a hacer algo
¿vale?
vamos a ir al componente
y esto sí que
a mí me parece una cosa
lo más parecido
que existe
es lo de Astro
y aún así
me parece que la gente de Angular
lo ha hecho muy bien
muy muy muy bien
entonces
vamos a cambiar el contenido
del app.component.ts
¿vale?
que aquí teníamos
pues el renderizado
del app user
y eso
vamos a quitar esto
vamos a poner
mira
tengo aquí un html
a ver
en las notas
tenía que haber un html
voy a copiar un html
para que sea un html
muy largo
muy largo
para que
aquí
mira
aquí
pongamos todo esto
¿vale?
es un html
súper largo
que la idea
es que
lo voy a
lo voy a hacer
un poquito más chiquitico
vamos a poner
el deep este
max width
500 píxeles
font size
24 píxeles
bueno
32 píxeles
¿vale?
y margin 0 auto
¿vale?
le voy a cambiar
un poco los estilos
los estilos
no me los está cargando
porque no nos teníamos
de la url
¿vale?
ahora sí que los tenemos
de la url
styles url
tipo selector
standalone
no es styles
style
hostia
la madre que parió
es que es styles
o style url
es en una
urls
¿vale?
ya está
ahora sí que me voy a estar
pidiendo
¿vale?
¿qué me parece Angular?
Angular in my favorite framework
and this is why
Angular has the coolest
defrable view
feature makes
es como un texto
muy largo
¿vale?
es un texto muy largo
y tal
imaginad que
debajo de este texto
vamos a crear otro componente
le vamos a poner
generate
components
comments
donde tenemos los comentarios
inline template
inline style
¿vale?
ya está
para tener los
estilos en línea
inline styles
o inline template
ah no sé si es inline template
inline template
inline styles
no
lo he puesto bien
no
inline
inline
no es inline
la verdad es que me gustaría
que tuviese
¡ay!
y tiene autocompletado
es verdad
tiene autocompletado
pero
pero no lo
no lo puse
pero tiene auto
¡ay!
es que me he equivocado
generate component
help
a ver
generate
compliance
help
comments
igual es que he puesto mal
algo me parece ¿no?
creo que había puesto
alguna palabra mal
me parece que
y que no me he fijado
style
puede ser ahora que sí
vale ahora sí
había puesto algo mal
alguna palabra
creo que el generate
a lo mejor no había escrito
correctamente
vale
hemos creado un nuevo
componente
comments ¿vale?
lo he puesto todo en línea
porque
no tiene mucho sentido
que estemos aquí
todo el día
con diferentes archivos
y porque es muy sencillo
pero este app comments
lo que vamos a poner aquí
pues no
estos sean los comentarios
de lo que sea
¿vale?
y vamos a poner aquí
la imagen del
this is fine
por ejemplo
this is fine meme
a ver si lo encontramos
this is fine meme
tu tu tu
bueno pues este
este mismo
¿vale?
comparar dirección
lo vamos a poner por aquí
que luego además
veremos una cosa
bastante interesante de esto
vamos a poner aquí
un lorem ipsum
por poner algo también
lo vamos a poner dentro
una p
esto por aquí
esto por acá
y ya lo tendríamos
¿vale?
vale
entonces
vamos a
ah
espérate
unos estilos básicos
para la imagen
para que no
no reviente
la página
porque si no
saldrá muy grande
ok
y espérate
porque hay algo
aquí
que se le ha ido
a ver
ahora
ahora sí
vale
perfecto
entonces
ya tenemos
el componente
comments
lo voy a poner aquí abajo
de todo
ok
así que me voy a ir al
app component este
aquí vamos a tener
app comments
que se me va a quejar otra vez
porque no lo estoy importando
a ti
sí que tenemos que ir aquí
app comments
vale
comments
component
y ahora
vale
ahí tenemos el
this is fine
que fíjate
que se le ha ido
un poco de las manos
porque está enorme
para que no pase esto
lo vamos a meter
dentro del div
vale
y ahora sí que lo tendríamos
ahí
madre mía
pero
vamos a ver esto
que esto sí que es lo interesante
fijaos que
que me parece angular
tienes todo esto
bla bla bla
y al final aparece esto
los comentarios
que no sé qué
no sé cuánto
vale
fíjate en una cosa
porque
claro
tú imagínate que estás aquí arriba
vale la pena
si tú estás aquí arriba
aquí arriba del todo
estás aquí arriba
y recargamos la página
fíjate
que está cargando
2 megas
pero es que
una
la imagen
la imagen
son 170k
está cargando la imagen
sin necesidad
está cargando la imagen
sin necesidad
porque no la estamos viendo
está cargando javascript
que no estamos utilizando todavía
porque ese componente
no lo estamos utilizando
y fíjate
aquí
no lo vas a poder
sí
sí lo puedes ver
vale
aquí tiene la imagen
esto es el waterfall
esto es súper importante
en el mundo del rendimiento web
fíjate que hay un waterfall
que al final
todos los recursos
que se van a ir utilizando
y aquí tenemos una raya azul
y una raya roja
la raya azul
es como que ya se ha descargado
toda la información
que tenemos como el DOM content load
sería como
como la primera
carga completa
que hemos tenido
pero
la carga final
realmente donde ha dicho
vale
ahora sí
está completamente cargado
y
a partir de ahí
está tranquila
la CPU
ha pasado aquí
en la raya roja
vale
eso sería como ya
el window load
la parte
la carga definitiva
que ha tenido la página
y en tema de rendimiento
esto muchas veces se nota
porque
uno
esto
se están peleando
por los recursos
de descargar
esta imagen
puede estar bloqueando
otras cosas
que pueden ser importantes
porque está en un sitio
que no sería interesante
proyecto me recomiendas
para centralizar
todas las docs de apis
de mi empresa
coño
todas las apis
todas las docs de apis
docusaurus
docusaurus
está muy chula
esta está muy chula
docusaurus
que además
la están utilizando
un montón de proyectos
y si no
astro
tienes starlight
pero bueno
a ver
la idea
por un lado sería
starlight está muy bonita
y además utiliza astro
lo que es interesante
sería utilizar
github
obviamente
otra
puede ser
git docs
no me acuerdo
si se llama
git docs
no git doc
git book
git book
es de pago
también te aviso
es de pago
pero hay muchas empresas
que lo utilizan
y está muy chulo
yo lo he visto
en alguna empresa
y además de que se integra
con jira
slack
y no sé qué
no sé cuánto
y entonces claro
a la hora de pasarle
de oye míralo aquí
aquí lo tiene
no sé qué
es muy bonita
fíjate que tienes aquí
ves documentación
no sé qué
obviamente es de pago
estás de pago
y cuesta dinero
pero si es para una empresa
esta la he visto
en funcionamiento
y te vuela bastante
la cabeza
de lo bonita que es
y mira
incluso tienes ahora
como una extensión
que le puedes preguntar
con inteligencia artificial
tú estás en visual studio code
y le puedes preguntar
y le dices
oye
cómo puedo hacer
un fetching de datos
con la API
de no sé qué
no sé cuánto
y lo detecta
no sé
esta de geekbook
es totalmente distinto
a estas dos
que te he dicho
pero a nivel empresarial
está muy chula
bueno total
tema rendimiento
vale
entonces amigos
tendríamos esto
que como podéis ver
la línea roja
está al final
de la imagen
ok
muy bien
entonces
vamos a utilizar
la directiva
de control
defer
y vamos a envolver
este componente
el app comments
que es el que está
al final
con este differ
y vamos a ver
qué es lo que hace
si es que hace algo
vale
ya estamos viendo
que pasan cosas
ya hay alguna
alguna diferencia aquí
fijaos
que ahora
lo que está pasando
aunque lo vemos
o sea
si nosotros miramos aquí
todo parece igual
todo parece exactamente igual
no notamos ninguna diferencia
pero si te vas a la network
fíjate
dónde está ahora
la raya roja
la raya roja
ahora está
antes de la imagen
vale
fíjate que la imagen
está después
de la línea roja
o sea
antes estaba antes
pero ahora está después
y por qué
es esto importante
por qué tiene un impacto
positivo en el rendimiento
en la percepción
del usuario
en el rendimiento
y por qué ha hecho esto
esto lo que está haciendo
es básicamente
hacer una carga diferida
y por defecto
lo que hace esta directiva
es decir
oye
este componente
lo que envuelva aquí
quiero que me lo cargues
de forma diferida
cuando la CPU
no tenga trabajo
cuando ya no haya peticiones
cuando se esté haciendo peticiones
no haya carga de trabajo
entonces
me cargas esto
y como puedes ver
lo que ha pasado
es que ha cargado
todo lo demás
y cuando ya
ha estado
el hilo
ha estado tranquilo
no tenía trabajo
ha dicho
vale
ahora que no tienes trabajo
todavía tienes que hacer esto
y entonces
una vez que ha estado tranquilo
ha hecho eso
pero ha hecho eso
con otro tipo de prioridad
ya lo ha hecho
con una prioridad
totalmente diferente
fíjate que la prioridad
que tenemos aquí
vale
de la imagen
es low
es una prioridad
en la que dice
bueno
pero esto lo puedo hacer
con tranquilidad
porque ya me ha dicho
que si esto lo tengo que cargar
de forma diferida
cuando esto esté tranquilo
pues lo puedo cargar
con toda mi tranquilidad
vale
o sea que ya fíjate
la diferencia
que ya hemos hecho
con en un momento
una mejora
pero podemos ir más allá
podemos decirle
bueno
esta carga diferida
imagínate que el usuario
por lo que sea
se da cuenta
pues podríamos poner
un playholder
vale
le podemos poner
un playholder
de forma que
no sería tanto
como cargando
pero ahora lo veremos
un playholder
sería más bien
como para dejar
el hueco
como para el hueco
que va a ocupar
eso
vale
el hueco
que va a tener
los comentarios
y tenemos que poner
un elemento
justamente
porque imagínate
que si no
habría un content visibility
daría un salto
entonces el playholder
sería el hueco
que queremos decir
no es tanto
el loading
ni el skeleton
vale
puede ser un hueco vacío
en donde va a estar
no hace falta
que ponga cargando
porque el cargando
es otro estado
que vendrá después
vale
tengamos en cuenta
que hay como diferentes
entonces
en este caso
el playholder
es simplemente
el hueco
donde debería estar
que si vamos
lo suficientemente rápido
lo podríamos ver
en futuros comentarios
de hecho
lo podemos intentar
bueno
fíjate
se ve muy poquito
pero si te fijas aquí
fíjate que hay ahí
un momento que
no
eso es porque pasa
porque obviamente
como se está cargando
de forma diferida
pues por eso
podemos ver el playholder
pero lo bueno
de poner un playholder
es que
ni siquiera hace falta
que le pongamos
podemos poner un punto
no hace falta poner nada
o sea
puede estar vacío
lo que necesitamos
es que haya un elemento
ahí
que realmente
llegue a verse
porque lo interesante
de poner un playholder
es que podemos llegar
a configurar el defer
y le podemos decir
que la carga diferida
sea solo
cuando
llega al viewport
cuando el elemento
de los comentarios
llega al viewport
entonces
quiero que me los cargues
y aquí
pues tienes un montón
diferentes
puede ser
cuando hay viewport
no sé qué
o sea
esto lo puedes configurar
y hay un montón de posibilidades
que puedes llegar
y lo pueden ver
en la documentación
de Angular
¿vale?
pero
¿por qué mejora esto
todavía más?
porque claro
tú imagínate
que entras aquí
y ahora
ni siquiera
va a cargar la imagen
¿ves?
ahora no tenemos
la imagen ni siquiera
ahora la imagen
no la carga
porque dice
¿para qué voy a cargar la imagen?
si la imagen
está mucho más abajo
pero claro
fíjate que tú vas scrolleando
vas scrolleando
vas scrolleando
y de repente
cuando va a entrar al viewport
¿qué ha pasado aquí?
que ha cargado
el this is fine
ha cargado el this is fine
lo ha cargado
y ya lo muestra
o sea
se ha dado cuenta
cuando iba a entrar
la lista
este componente
en el viewport
y entonces
lo ha cargado
pero ojo
una cosa muy importante
no solo es que carga
los recursos
que eso sería
muy chulo
¿no?
la imagen
no solo ha cargado
los recursos
estáticos
también lo que ha cargado
es el javascript
¿vale?
o sea
fíjate
fíjate
vuelvo a subir
¿vale?
tengo aquí
todo lo que ha cargado
no sé qué
lo limpio todo
¿no?
tú vas bajando
y cuando bajas
no solo carga la imagen
también nos está cargando
aquí este javascript
¿y este javascript
qué es?
este javascript
si te pones a mirar aquí
lo que vas a ver
¿ves?
es que ha cargado
de forma diferida
también ha cargado
el componente
o sea
todo este
todo este javascript
todo este javascript
todo este javascript
no este no
perdón
este
todo este
este
todo este javascript
que veis aquí
que puedes utilizar bibliotecas
yo que sé
animaciones
lo que sea
CSS
lo que sea
todo eso
lo está cargando
de forma diferida
o sea
hasta que no lo necesita
no lo carga
y lo más interesante
es que lo hemos logrado
simplemente
simplemente
con dos líneas
que todavía hay más
porque claro
obviamente
¿cuál es el problema
que tenemos ahora?
el problema que tenemos ahora
es que ahora
es todavía más claro
¿no?
que puedes ir
y si es lo suficientemente lento
o sea
si vamos aquí
hacemos esto
slow 3G
y yo ahora
me voy abajo
¿vale?
estamos viendo el playholder
hasta que no carga
pero lo interesante de esto
es que también esta directiva
te ofrece la oportunidad
de ponerle un loading
y le puedes decir
¿vale?
quiero que aparezca
cargando comentarios
mientras se está cargando
¿vale?
entonces el playholder
sería
cuando no está todavía
el componente
pero tampoco se está cargando
sería como para
el hueco
el loading
sería cuando ya debería
queremos mostrar el componente
pero lo estamos cargando
lo estamos descargando
básicamente
cuando estamos descargando aquí
aparecería el loading
además el loading
una cosa interesante
es que le puedes decir
el mínimo
de segundos que quieres
no sé por qué harías esto
yo no lo haría
yo lo intentaría evitar
pero le puedes decir
oye
quiero que el loading
como mínimo
aparezca un segundo
y esto
lo que va a ocurrir
si le ponemos
un nothrolling
¿ves?
esto como mínimo
aparece un segundo
a mí no me parece
muy interesante
el hecho de que
como mínimo
aparezca un segundo
pero bueno
lo más interesante
normalmente es que
hagas esto
y que por lo tanto
aparezca lo mínimo posible
pero que sepas
que lo puedes hacer
por si por lo que sea
quieres mostrar
una animación
que sea muy chula
o lo que sea
para que veamos
claro
cómo funciona el loading
sin el mínimo
pero que tenga sentido
¿ves?
cargando comentarios
y luego ya
aparece
y esto sería
con la directiva
esta del defer
el playholder
y el loading
y lo hemos hecho
en un momento
de forma totalmente
declarativa
y en un momento
así que eso sería
una pequeña introducción
del tutorial
de Angular
que espero que os haya gustado
me voy a poner algo
en el ojo
que como veis
lo tengo jodido
porque me he llevado
una rama por delante
hoy corriendo
y me he hecho daño
pero bueno
estoy bien
estoy bien
la verdad es que
no me duele
pero ahora sí
que me lo noto
que me arde un poquillo
así que me lo voy a
me lo voy a cuidar
porque voy a echar
alguna cosa
para que no me moleste
si ya me voy
me voy porque me voy a poner
algo en el ojo
a ver
si será por
porque veis que lo tengo
así un poco rojo
que me
espero que no me
se me vaya
me vaya peor
no voy a subir el código
porque lo tenéis aquí
amigos
o sea
el tutorial este
yo he seguido este tutorial
si vais aquí a tutorials
learn angular in your browser
solo que yo lo he hecho
directamente
a partir de la consola
pero bueno
espero que os haya gustado
la intro
hay más cosas
midu no pelies
no es de pelear
por ejemplo
lo de definir las rutas
faltaba lo de las rutas
me hubiera gustado
lo tenía ahí previsto
pero bueno
tenéis también formularios
y tal
si no
más adelante
igual hacemos una segunda parte
quién sabe
pero le he echado
sí parece un orzuelo
pero me he comido la rama
o sea
lo sé porque me he comido la rama
saben que es lo mejor
que angular es 100 veces
mejor que esto
ya te digo
perfecto
pensar
bueno
no
todo
no
todo
no
hay
sabemos