Tengo bastantes tutoriales de cómo hacer ciertas cosas en Angular, sin embargo nunca había hecho uno introductorio realmente para Angular… y bueno, estaré haciendo esta guía en una serie de publicaciones para ayudarles a introducirse a este grandioso Framework.

Bueno antes que nada, un poco de…

Historia rápida

Angular empezó con una versión de JS pura que como tal, así se le conocía “AngularJS”, esta versión tenía toda la fundamentación que posteriormente se usaría en “Angular” (a secas). Una vez que todo estaba listo y gracias a Microsoft y su lanzamiento de TypeScript (un super set de JavaScript), el equipo de Angular decide dar el salto y convertir todo a un framework dogmático, es decir, un framework que conjunta muchos pequeños pedazos (sistema de rutas, peticiones http, manejo de errores, controladores, vistas, estilos, entre muchas otras cosas) que sigue patrones de diseño para que sea más fácil trabajar con este, pero a la vez, te encajone en sus prácticas y así te sea más difícil hacer cosas fuera de su control y liberar Angular 2.

Actualmente Angular libera una versión cada 6 meses y actualmente (al momento de publicar este tema) se encuentra en su versión 12.2.5 y desde Angular 2 no ha cambiado tan radicalmente la forma que trabaja, un dato es que nunca existió la versión 3 debido a que decidieron empatar todas sus versiones por lo que, al hacer esto dieron el salto a la 4 debido al sistema de rutas que sacaría dicha versión.

Para Angular 2, un equipo de desarrollo decidió que era muy complicado y demasiado tardado trabajar directamente con el Framework (desde crear un componente, un módulo y más, cosas que veremos más adelante) así que decidieron crear una herramienta para consola que nos facilitara la vida… a este le llamaron Angular-CLI

Y desde entonces, se ha ido lanzando más dependencias, librerías, versiones y muchas cosas que han hecho cada vez más grande, robusto, mejor, fácil y demás a Angular…

Si ya tenemos cómo inició pues ¡Manos a la obra!…

Instalando Angular (¿o Angular-CLI?)

Porque instalar directamente Angular y montarlo aún es una tarea tediosa, vamos a aprovechar esta maravillosa herramienta que ya les mencioné, Angular-CLI.

Sin embargo antes de poder utilizarla, requerimos de instalar NodeJS… en este caso, como soy usuario de Windows, el instalarlo es súper fácil, solo hay que ir a la web oficial: https://nodejs.org/es/ y bajar el ejecutable, una vez hecho eso, solo es la típica “Siguiente, siguiente, siguiente” ¡Y listo!… ahora ya tenemos Node + NPM, listo para instalar Angular-CLI.

Dato: NodeJS v16 no es la versión soportada directa, es la 14, pero igual funciona la 16 para no quedarnos “en el pasado” 😉.

Entonces, abramos una consola de comandos y únicamente hay que ejecutar el siguiente comando:

npm install -g @angular/cli

Una vez que termine, tendremos Angular-CLI instalado y listo para empezar con Angular. Si quieren validar corran el comando:

ng -v

Nuestro primer proyecto en Angular

Ya que tenemos instalado Angular-CLI, hay que crear nuestro primer proyecto, para ello vamos a ir a una carpeta como Documentos y crear quizá una carpeta llamada Proyectos y entrar ahí a través de la consola:

cd Documents/Proyectos

Bueno, esto no lo explico, aquí no aprenderemos cómo usar la consola, lo siento…

Una vez ahí vamos a crear ahora sí nuestro primer proyecto con los siguientes comandos:

ng new mi-primer-proyecto
cd mi-primer-proyecto
ng serve -o

El primer comando nos permite crear nuevos proyectos ng new [nombre del proyecto] y nos pedirá ciertos datos, vamos a verlos:

La primer pregunta que nos hace es: “¿Quiere agregar Angular routing?” hayocasiones donde querramos tener un proyecto que es una web de “bienvenida” o alguna app sencilla de una sola vista, por lo que no ocupamos rutas, por ello la pregunta. Le ponemos “y” y enter.

Después, Angular nos ofrece múltiples pre-procesadores de CSS, o simplemente nos permite usar CSS puro, sin embargo debido a que los preprocesadores nos hacen un código más limpio y fácil de trabajar, vamos a seleccionar con las flechas de nuestro teclado “SCSS” y damos enter.

Una vez que está listo, va a instalar ciertos paquetes que requiere el proyecto, y ya que termine, veremos que ya está listo nuestro proyecto para empezar a trabajar en el.

Ahora ejecutamos el segundo y tercer comando, el tercero nos permite arrancar los proyectos de Angular en un ambiente de desarrollo y gracias a la “bandera” -o de forma automática, nos abre la web en nuestro navegador donde encontraremos la web de bienvenida (que la nueva versión vaya que es bonita comparada con la anterior, como se ve en la siguiente captura…)

Entonces, ya tenemos nuestro primer proyecto, Angular-CLI integra algo llamado hot-reload que básicamente es: Haces un cambio, Angular transpila los cambios y ¡Boom!, ahí están.

Antes de probar esto, vamos a hablar de algo intermedio transpilar … TypeScript como mencioné es “un super-set” de JavaScript (algo así como esteroides para JS y así ponerlo más fuerte), es decir, lo que hace es que TypeScript toma lo que escribimos en este y lo pasa a JavaScript, ese proceso se le llama transpilar, convertir de “un lenguaje a otro”, mientras que compilar es pasar un lenguaje como C++ a lenguaje máquina, esa es la diferencia.

Entonces, bueno, ya con esto, veamos ahora sí nuestro primer cambio y empecemos a entender Angular, hay que abrir nuestro proyecto con algún IDE o editor de código (WebStorm, VSCode, Atom, Brackets, o hasta Dreamweaver si es que aún existe nos sirve)…

Hay que ir a src/app/app.component.tsy vamos a cambiar title = 'mi-primer-proyecto' por title = '¡Hola mundo!' y guardar…

Entonces veremos que cambiará nuestro titular:

Sin que nosotros demos F5 o algo, la web se va a actualizar y podemos observarlo por cada cambio, en ocasiones le tomará algo de tiempo (recordemos, hay que transpilar) sobre todo cuando nuestro proyecto crezca, a veces será básicamente instantáneo.

Y ya con esto, tenemos el primer proyecto iniciado y listo para trabajar…

Para finalizar la primer parte vamos a ver, ¿qué vamos a hacer?… exacto una lista de “Por hacer”… mentira, vamos a hacer un mini Spotify, es decir habrá una lista de reproducción y abajo un reproductor de música, entre otras cositas interesantes…

Entonces vamos a entender la …

Estructura de los Directorios

Los directorios de Angular son relativamente sencillos y se ven más o menos así:

Un detalle: Ignoren “External Libraries” y “Scratches and Consoles”, son cosas relacionales a mi IDE…

La carpeta node_modules es la carpeta que almacena todas nuestras dependencias, cada vez que instalemos una nueva, aquí se instalará, cuando la querramos desinstalar, de aquí se desaparecerá, y como recordatorio, eviten tocar cosas de aquí a mano… nunca lo hagan, es dañino para su salud 😛

La carpeta src es donde se mantendrá todo nuestro código, aquí encontraremos 3 subdirectorios, app donde encontraremos todo el código y aquí estaremos agregando cosas nuevas, componentes, módulos y demás… assets donde estarán nuestros estáticos, a diferencia de React que luego se complica usar imágenes en Angular es súper fácil porque podemos agregarlos aquí y simplemente llamar su ruta, esto lo veremos más adelante, no se preocupen. Por último tenemos la carpeta environments que es donde podremos mantener nuestras configuraciones por ambiente, originalmente Angular nos provee 2, producción y desarrollo, pero pensando que tenemos staging (o ambiente pre-producción), uat o ambiente de pruebas para la gente de QA, o algunos especiales, aquí podemos agregar todos esos ambientes y sus configuraciones especiales y después, llamar esos ambientes. Por ahora no se compliquen mucho, solo mantendremos estos 2…

De ahí habrá varios archivos, veamos en lista:

• favicon.ico: Nuestro favicon para las pestañas
• index.html: Nuestro archivo index, donde todo es “cargado”
• main.ts: Donde “arranca” Angular
• polyfills.ts: Donde se agregan las configuraciones y se cargan dependencias para dar soporte a navegadores viejos u otras cosas relacionadas.
• styles.scss: Nuestro “punto de entrada” para todos los estilos, este es el archivo principal desde dónde se cargarán nuestros estilos
• test.ts: Configuraciones para el servicio de pruebas

Y listo, esas son todos por dentro, ahora veamos los archivos que están “sueltos”:

• .broswerlistrc: Son las configuraciones para saber qué nivel de navegadores soporta nuestra aplicación
• .editorconfig: Configuraciones para que nuestro IDE se adapte y tengamos una base de código idéntica entre editores y así no haya cosas raras como “aquí tengo un 4 espacios, allá 2 tabs”
• .gitignore: El archivo que nos permite ignorar ciertos archivos o directorios antes de subir a Git
  angular.json: Aquí están todas las configuraciones relacionadas a Angular, este archivo sí es bastante relevante, sin embargo no voy a detallarlo aquí…después veremos algunas.
• karma.conf.js: Son las configuraciones para Karma (servicio de pruebas)
• package.json: Este es el archivo relacional a NPM para saber qué dependencias tenemos instaladas, la versión de nuestro proyecto, agregar comandos y demás cosas a nuestro proyecto pero recordemos, todo a nivel npm
• package-lock.json: Este es el archivo para respaldar y dar seguimiento a las dependencias instaladas (cosas de NPM, no le pongan atención)
• README.md: Bueno, ya saben, el “Leéme” del proyecto
• tsconfig.app.json: Configuraciones para TypeScript más relacionales al proyecto en sí
• tsconfig.json: Configuraciones para TypeScript pero genéricas (ya como para transpilaciones)
• tsconfig.spec.json: Por último las configuraciones para pruebas de TypeScript

¡Y eso es todo! (Aunque a futuro, puedan cambiar…)

¿Qué sigue?, entender lo primero de Angular, los componentes y los módulos…Una vez que logremos explicarlo, vamos a terminar esta primera parte, porque #MuchoTexto…

Componentes y Módulos en Angular

Quiero iniciar esta última parte con un comentario, esta sección explicará de forma sencilla los módulos, no iremos a profundidad, por lo que no te preocupes si no los entiendes bien, la idea principal es entender más los componentes.

Un componente en Angular, se refiere a un elemento o bloque de código que construye una sección de un módulo… En palabras que podamos entender usando una Analogía:
Pensemos que tenemos una casa, esta casa tiene distintos lugares, como una sala, una cocina, tres cuartos, un patio y una cochera.

Cada lugar a su vez, tiene distintos elementos que nos hace entonces entender es es por ejemplo una sala y no la cocina, porque si no hubiese por ejemplo una estufa y un refrigerador en un cuarto vacío, ¿podríamos decir que es la cocina? (Vaya filosofía sale de todo esto), es por ello que necesitamos diferenciar a través de elementos qué es cada lugar.

Y a estos elementos los vamos a conocer como Componentes… un Refrigerador, una estufa, un microondas, un lavabo, una alacena son esos componentes que nos permiten diferenciar.

Entonces, ya que tenemos los componentes ¿Se puede tener sub-componentes?, claro que sí, podemos tener “componentes hijos” por así decirle (lo que también haría que tengamos “componentes padre” obviamente)… también hay dos tipos de componentes, componentes “inteligentes” y componentes “tontos”… Hay otras formas de llamarlos pero para entender mejor esto, así los nombraremos.

Sigamos con nuestro ejemplo para demostrar estos “4 casos”. Dentro del refrigerador, tenemos la parte de congelación y la parte normal, es decir “donde ponemos los hielos y donde no”…

El refrigerador es el componente padre, sus dos componentes hijos serán entonces la parte “de los hielos” y “donde va la comida normal”… con la imagen, espero se entienda mejor la representación.

Ya entendimos qué es un componente padre y cuáles son los componentes hijos. Ahora entendamos cuáles son los componentes inteligentes, y los tontos…

En este caso, el congelador, es ahora el componente padre lo que haría al refrigerador el componente “abuelo”, así que sí, los componentes hijos pueden tener aún más sub-componentes “hasta el infinito” (aunque tampoco se recomienda muchos niveles)… y dentro de este, tenemos la charola de hielo, más allá de “mantener el agua en su lugar” hasta que se congele el agua, no tiene mayor utilidad de “solo mantengo los hielos”, así que solo vamos a interpretar como que el agua ya está congelada.

Por lo tanto, la charola no tiene realmente utilidad, bien podríamos dejar los hielos ahí ya hechos cuadritos y nada pasaría, entonces, la charola es un componente “tonto”…

Conclusión de esto, los componentes nos sirven para tener lógica, o simplemente para mostrar datos o “diseños”…

¿Y de qué se componen los componentes valga la redundancia?, es bastante sencillo, los componentes consisten en 3 cosas y algunos opcionales:

Una plantilla en HTML…aquí es donde podemos poner todo lo que aparecerá en pantalla.

Una clase de TypeScript, donde mantendremos la lógica y comportamiento del componente.

Un selector que nos permite indicar el nombre/etiqueta o selector que usará nuestro componente.

Esto, como la base, adicionalmente y de forma opcional hay dos adicionales:

Estilos aplicados únicamente a ese componente y pruebas para el componente.

Viéndolo aplicado en nuestro proyecto:

1. El HTML.
2. La clase
3. El selector
4. Los estilos
5. El servicio de prueba

Veamos un ejemplo casi-aplicado en Spotify que es lo que más o menos haremos:

Cada recuadro podría ser un componente, el componente “padre” de la barra lateral (donde está la navegación), un sub-componente sería el menú “principal” (inicio, buscar, tu biblioteca), y otro sub-componente las listas de reproducciones.

En este caso, la lista de menú es un componente “tonto” dado que realmente sólo sería estilo, pero, el de la lista de reproducciones sería un componente “inteligente” porque cambiaría conforme creemos listas y nos permitiría con un formulario agregar más listas y demás.

Tenemos el componente de “tarjeta” donde muestra las playlists también que nos genera Spotify (Como los daily mixes) y otro que puede tener múltiples en el reproductor. ¿Pueden identificar cuáles serían tontos y cuáles inteligentes aquí en el de reproductor?

Por último, como ya mencionamos los módulos son una “envoltura” de muchos componentes, así que por ejemplo en este ejemplo de Spotify nuestro módulo se podría llamar “home” y cargar todos los componentes que se ocupen en el home, el perfil sería otro módulo, el perfil de un artista otro y así sucesivamente…

Hay que detallar algo, los módulos TODOS dependen de un módulo general, ese módulo que envuelve todos, absolutamente todos los módulos y ese siempre debe existir y en la mayoría de veces, se deja tal cual está, que es el app.module.ts …

En nuestra segunda parte, veremos las directivas, qué son los servicios, los pipes, cómo se muestran datos en las plantillas y cómo crear el servicio de rutas básico para nuestra micro-aplicación de Spotify.

Así que sígueme para más guías, tutoriales y más… ¡Te espero en la parte 2!