¡Madre mía! ¿A quién se lo iba a decir yo que iba a hacer algo sobre Angular en este canal?
¡Cierto!
Y para ello, pues qué mejor que tener aquí a Bezael, de Dominicode. Muchas gracias por venir.
Muchas gracias por invitarme. ¿Qué tal? ¿Cómo estás?
Pues genial. Estoy hasta nervioso. Estoy nerviosísimo.
Primero, por todos los comentarios que me van a llegar del palo.
¿Pero qué hace Angular en tu canal?
Sí.
Lo segundo, porque no tengo ni puñetera idea de lo que voy a hacer.
Lo tercero, que vivo con miedo de pensar que me pueda gustar.
Yo creo que te va a gustar.
¡Ojo!
¡Ojo!
Me gusta.
Creo que te va a gustar.
No superará tus expectativas en cuanto a lo de React, pero creo que te va a gustar.
Vale. Pues nada, si quieres, pues le damos caña. Empezamos con ello.
Yo, lo que vamos a hacer, básicamente, para que la gente esté un poco avisada,
es crear una aplicación de Angular desde cero.
Veremos hasta dónde llegamos, hasta dónde lleguemos.
Que si a la gente le gusta, le da like, lo comparte y todo esto, pues bueno, pues ya lo...
No sé, lo seguiremos, ¿no?
Lo seguiremos, ¿no?
Parte 2, 3, 4 y...
Correcto.
Así que yo me pongo en tus manos de qué vamos a hacer poco a poco, paso a paso y tal.
Muy bien. Pues yo creo que lo primero que deberíamos hacer es acceder a la página oficial de Angular.
Vale.
Y es algo que también aprovecho para recomendarte, siempre que vayas a iniciar en una librería,
una library, perdón, no se dice librería en castellano, o framework, es recomendable que veamos la documentación
para ver con qué nos vamos a encontrar.
Vale.
Una vez estemos aquí en la documentación, si vamos al apartado del Get Started, podremos ver que nos cuenta cosas sobre Angular y demás,
los requerimientos que necesitamos, Node, por supuesto, etcétera, etcétera.
La página web, o toda la documentación, está en inglés de momento.
Hay un proyecto que aún no está muy definido, donde la comunidad de Latinoamérica, principalmente con Jorge Cano y Andrés Villanueva,
queremos traducir la web, que es algo muy interesante y que se habló, pero aún no están bien las bases,
pero bueno, es muy posible que luego cuando la persona que nos está viendo ahora acceda, tenga una opción en castellano.
Vale.
Bien, lo primero que debemos instalar para poder trabajar con Angular es el CLI de Angular,
que si vamos al apartado, aprovecha el buscador, por favor, y, ah, no, te miento, lo tienes a la derecha,
que es el paso primero, instalar el CLI.
Así que vamos a hacer esto, instalaremos de manera local el CLI, aunque luego el código lo mostraremos en una sandbox.
Vale. Ahora mismo entonces voy a hacer una instalación global de este paquete.
Que no te dé ahí ninguna alergia ni nada.
Es la primera vez que instalar.
Es la primera vez. No sé si me va a saltar el antivirus o algo de mi ordenador. Vamos a esperar que no.
¿Esto tarda mucho?
No, no, no mucho.
Es lo que tienen, ¿eh? Los paquetes de Angular.
Solo de Angular.
No me ataques, por favor.
No, es lo que tienen los paquetes de Node, en general.
Exacto.
Los de NPM.
No es una cosa de Angular, pero incluso el de Google Reacup también tarda un montón.
Sí, sí.
Y por lo que veo, este tampoco ha tardado tanto.
O sea, mira, 29 segundos.
Está bien, está bien.
Está muy bien.
Lógicamente esto depende de la conexión de internet también que tengamos.
Vale.
Una vez tengamos, si vuelves, por favor, a la documentación, Miguel Ángel.
Sí.
¿Cómo te prefieres que te llame? ¿Miguel Ángel o Midudez?
Tengo dudas a veces.
El que prefieras.
Midudez.
Miguel, Miguel Ángel, Midudez.
Midudez.
Chiquillo.
Vale.
Si continuamos con el segundo paso, lo siguiente sería crear ya un proyecto en Angular.
Que lo hacemos a través de la consola, del CLI que hemos instalado.
Así que vamos a hacer este paso.
Vale.
Entonces, esto sería NG.
NG, correcto.
Que supongo que es de Angular, ¿no?
Sí, es NG, que es nuestra bandera para todo.
Ah, muy bien.
Sí.
New, de nuevo.
Correcto.
Y el nombre de nuestro proyecto, ¿cómo lo pongo?
Este proyecto le podemos llamar Live Midudez.
Live Midudez.
Vale.
Y si hacemos un espacio, por favor, Miguel Ángel.
Sí, espacio.
Podríamos pasar que queremos utilizar los estilos, si queremos utilizar algún preprocesador,
porque por defecto nos crea CSS.
Podemos utilizar esta Ilus, podemos utilizar LES o SAS o incluso SCSS.
Vale.
Bien.
Esto lo podemos indicar aquí, o las rutas.
Por el momento, si estás utilizando el CLI a partir de la versión 6, presiona Enter ahora
sí, por favor.
Ahora sí.
Sí que tendremos este prompt que nos hace dos preguntas.
Vale.
Que es, si queremos rutas, vamos a decirle que sí.
Quiero rutas.
Bien.
Y aquí está lo de los estilos.
Voy a dejar que tú elijas el preprocesador que quieras.
Pues SCSS.
Muy bien.
Vale.
Creando.
Vale.
Me ha creado aquí ya un montón de archivos.
Sí.
Esto nos va a crear toda la estructura necesaria para trabajar con un proyecto de Angular.
Vale, vale.
Ya.
Uy, veo cosas interesantes aquí de TypeScript.
Por supuesto.
Eso es un punto muy importante.
Nosotros cuando hacemos código en Angular, picamos código en...
Picamos.
Qué feo ha sonado.
Picamos.
Escribimos código en TypeScript.
Vale.
Que yo creo que es una ventaja.
Vale.
Uy, uy.
Aquí podemos tener una discusión.
¿Estás obligado a utilizar TypeScript?
Pregunto.
Sí.
Sí.
O sea, si haces un proyecto en Angular, tienes que escribir en TypeScript.
Es decir, bueno, la base es TypeScript, pero luego no estás ahí...
Puedes utilizar Enix como si no hubiese...
Vale, vale.
O sea, que yo puedo empezar a escribir JavaScript plano...
Totalmente.
Ah, vale, vale.
Es compatible también.
Vale, vale.
Es como si es lo mismo que hiciésemos cuando escribimos en TypeScript.
Vale, vale.
Que podemos...
Vale.
Sí, que puedes ignorarlo, ¿no?
Exacto.
Y tener un archivo que no lo use.
Y tener un archivo que no lo use.
Vale, vale.
Bien, bien, bien.
Me gusta.
O sea, es que claro, pensaba que si te fuerza ahí a tener utilizar TypeScript, no sé si
me va a gustar ya mucho.
Pero son todos ventajas.
Sí, sí, son...
Bueno.
Sí, son todos ventajas.
Por favor.
No quiero romper ya aquí el live.
No, tú hagas polémica, por favor.
No, no, hombre.
Si hacemos un ls aquí donde estamos...
Sí, ls.
Veremos que tenemos una carpeta con el nombre de nuestro proyecto.
Vamos a acceder a esta carpeta, por favor.
Sí.
Y vamos a abrir el editor de códigos.
Vale.
Bueno, voy a hacer otro ls, si no te importa, solo por ver.
Ah, sí, correcto.
Abro mi...
No, pasa nada.
Y aquí tengo ya mi proyecto abierto con Visual Code.
Perfecto, me gusta.
¡Suscríbete al canal!