construye minioland

Construye Minioland: Tu primera aplicación con Angular | Parte #1

Última actualización:

¿Qué vamos a construir?

Minioland, o así he decidido llamar a esta sencilla app, totalmente responsive y de tipo Single Page Application (aka SPA).  Una SPA es aquella que sólo usa un único archivo HTML y no necesita que el navegador se recargue para ver todo su contenido, aunque saltemos de una sección del menú a otra, por ejemplo, del home al about. Aquí puedes ver la versión final. Chula, ¿verdad?  😊

NOTA: IDIOMAS, QUERIDA.

Es posible que alguna vez traduzca algún término de programación, pero lo normal es que no lo haga, porque considero que traducir cierta jerga complica las cosas innecesariamente. El inglés es el lenguaje universal y es el idioma en el que están escritos los lenguajes de programación que aquí nos ocupan.

¿Cómo vamos a construirla?

Utilizaremos Angular y trabajaremos con:

  • routes
  • services
  • bootstrap 4
  • angular CLI

¿Y esto a qué viene?

Estoy convencida de que la mejor manera de aprender algo es explicándoselo a alguien como si de tu alumno se tratase. Además, mediante esta técnica de aprendizaje estoy, no solamente afianzando conceptos, sino ayudando a otra persona a que aprenda algo nuevo. Es un pack de 2x1 : dos cosas buenas a través de un solo acto. ¡Así que vamos a ello!

Consideraciones previas y materiales

👉 Yo utilizo Windows, así que todas las indicaciones están orientadas a ese sistema operativo.

👉 Necesitarás conocimientos básicos de HTML, CSS, terminal de comandos y JavaScript para poder seguir este post sin perderte. 

👉 Deberás tener instalado NodeJS (instrucciones aquí)

👉 Aquí encontrarás los materiales que vamos a necesitar para nuestro proyecto. Por el momento, simplemente descárgatelos.  

Inicio de la app

1. Instala Angular CLI si todavía no lo has hecho, introduciendo el siguiente comando en tu terminal: 

npm install -g @angular/cli

2. Navegamos hasta a la carpeta donde queremos crear nuestro proyecto y damos la instrucción para iniciar el esqueleto de la aplicación de Angular mediante el comando ng new (+ el nombre que le queramos dar a nuestra app). En nuestro caso:

ng new minioland

Así es como Angular, a través de Angular CLI, nos generará el scaffolding (aka esqueleto) de nuestra app. 

Angular CLI nos preguntará si queremos añadir Angular routing. Le decimos que no. 

A la pregunta de qué formato de stylesheets queremos usar, le damos a enter y eso seleccionará por defecto CSS, que es lo queremos para este proyecto.

Ahora nuestro esqueleto debería crearse automáticamente, cosa que puede tardar unos minutos.

Si todo ha salido bien, debería salirte un mensaje tipo:

added 1089 packages from 1027 contributors and audited 42617 packages in 37.047s
found 0 vulnerabilities

3. Abre la carpeta del proyecto con tu editor de código y verás que Angular ha creado un esqueleto que tiene este aspecto (en Angular 7).

La carpeta "app" (seleccionada), es en la que vamos a trabajar el 99% del tiempo, porque es donde se encuentra nuestra aplicación.

Otra de las carpetas que utilizaremos será "assets", donde colocaremos los pocos materiales que necesitaremos para construir nuestra app (imágenes, un pequeño archivo .css, etc). ¡Pero más detalles sobre esto luego! 😃

A mí me gusta utilizar la terminal integrada en Visual Studio Code, porque me permite tener el código y el estado de mi app todo en la misma pantalla, pero tú puedes organizarte como quieras. 

4. Abre tu terminal y ejecuta el comando ng serve -o

Esto abrirá tu app en tu localhost 4200. Ahora tu terminal está en modo "watch", es decir, cada vez que edites tu código y le des a "guardar", angular CLI automáticamente recompilará tu código y recargará el navegador, donde podrás ver tus cambios sin necesidad de que hagas un "refresh" manual. ¡No la cierres! Si lo haces, terminarás el proceso de compilación. 🤦‍♀️  Si te pasa eso, simplemente vuelve a abrir tu terminal y ejecuta el mismo comando.

aspecto inicial app angular

Te recomiendo que a partir de ahora tengas siempre abiertas las dev tools de chrome en tu navegador, donde ahora debería decir:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Yo las dejo siempre abierta en modo horizontal, (ocupando una pequeña parte de abajo de mi navegador) porque me ayuda a capturar rápidamente cualquier error que pueda surgir.

Bien, ahora nuestra app tiene este aspecto tan majo:

aspecto visual inicial de una app de angular7

¡¿De dónde sale ese código?! 😵

Del archivo app.component.html. Échale un vistazo y verás que tiene el aspecto de un archivo normal de .html, con algunas cosillas nuevas... Vamos a verlas todas a continuación. ¡Nos metemos en harina! 👩‍🍳

Proceso de carga de una aplicación en Angular

¿Cómo sabe Angular que tiene que mostrar en el navegador el contenido del app.component.html? En realidad, ese no es el archivo served por el navegador, sino el archivo index.html. ¿Recuerdas que hablábamos de las single page apps que Angular nos permite construir? Pues esta, el index.html, es nuestra SPA.

Compruébalo tú mism@: entra al archivo index.html y verás que es archivo normal de HTML (o casi). Fíjate en la etiqueta <title>, pues refleja el mismo título que vemos en la pestaña de nuestro navegador. 

Pero el body es lo interesante aquí. Tenemos una etiqueta llamada <app-root>, que está vacía. Sin embargo, el navegador sí nos muestra contenido (la página de Welcome to Minioland que puedes ver en la imagen de arriba). 

¿Pero cómo sabe Angular que tiene que vincular la etiqueta <app-root> con el archivo app.component.html y mostrar su contenido? Porque lleva a cabo el siguiente proceso:

archivo index.html

⬇

contiene la etiqueta <app-root>

⬇

que sale del archivo app.component.ts


@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

⬇

que le indica a Angular que busque y muestre el contenido del archivo app.component.html

Sin embargo, el archivo que se renderiza en nuestro navegador no es exactamente igual al archivo index.html, porque es una versión final y re-compilada. Inspecciona el código fuente de la página y lo verás. 

Como ves, en el body, a parte del <app-root> hay unos scripts que no están en el archivo index.html original:

<script src="runtime.js"></script> <script src="polyfills.js"></script> <script src="styles.js"></script> <script src="vendor.js"></script> <script src="main.js"></script> </body>

Estos scripts son inyectados por en Angular CLI automáticamente. Cada vez que re-compilemos nuestro código, Angular buscará e inyectará los scripts correspondientes. Y este es, de hecho, el primer código que Angular ejecuta cuando renderiza nuestra app. 

Ese código sale del archivo main.ts, de ahí su nombre (= código principal). Dentro verás, entre otras cosas, este bloque de código:

platformBrowserDynamic().bootstrapModule(AppModule)

que le indica a Angular desde qué módulo tiene que lanzar (o iniciar) la aplicación. Por defecto siempre será el AppModule. 

Si vamos a nuestro archivo app.module.ts verás que tenemos una declaración llamada bootstrap, (que nada tiene que ver con el CSS framework), que está informando a Angular de que ése es el componente que tiene que utilizar cuando se inicie.

bootstrap: [AppComponent]

🧐TIP: en visual studio code puedes ir haciendo ctrl+click izq en cada término de referencia para que te lleve a su origen. Por ejemplo, si clicas en bootstrap: [AppComponent], te llevará al archivo app.component.ts. Esto ayuda bastante al principio para entender de dónde sale cada cosa.

Y de esta manera se cierra el ciclo:

archivo main.ts nos lleva al

⬇

archivo app.module.ts

⬇

que le dice a Angular que muestre el componente AppComponent

⬇

donde Angular lee que tiene que inyectar el selector app-root

⬇

Angular lo inserta en el archivo index.html

⬇

el archivo index.html busca el contenido de la etiqueta <app-root>

⬇

que nos lleva al archivo app.component.html y lo muestra en nuestro navegador

Creación de la estructura de nuestro proyecto

Como puede que sepas, Angular se basa en una jerarquía de componentes, que son como pequeños paquetes donde pondremos nuestro código y que se mantienen aislados unos de otros, con posibilidad de conectarlos entre sí. Además, cuando nuestra aplicación tiene un cierto tamaño, podemos organizar un grupo de paquetes y ponerlos en un contenedor, cuyo nombre oficial es un móduloVamos, un paquete de paquetes. Como las diferentes plantas de un centro comercial: cada planta sería un módulo.

Lo que puede que te confunda, y así me pasó a mí al principio, es que en el esqueleto básico que Angular nos proporciona ya existe un módulo, el app.module.tsLo encontrarás dentro de la carpeta app. Es decir, de base existe un módulo gigante (el app.module.ts) que va a englobar todos nuestros módulos, que a su vez contendrían todas nuestras carpetas, componentes, etc.

Los módulos no son carpetas, sino simples archivos tipo mi-modulo.module.ts normalmente con el mismo nombre que las carpeta que los contiene. (Fíjate en el caso de la carpeta app y su módulo, que se llama como ella: app.module.ts).

Así que una aplicación normal en Angular podría tener un aspecto como este: 

  • app
    • nuestro módulo personalizado 1
      • carpeta 1
        • componente 1.1
        • componente 1.2
      • carpeta 2
        • componente 2.1
        • componente 2.2
    • nuestro módulo personalizado 2
      • carpeta 1
        • componente 1.1
        • componente 1.2
      • carpeta 2
        • componente 2.1
        • componente 2.2

La carpeta app no es un módulo por sí misma. Lo que la hace actuar como un módulo es el archivo que tiene en su interior, el app.module.ts. Lo mismo debemos hacer si queremos que nuestras carpetas actúen como módulos. Nuestro módulo será un archivo que recibirá un nombre tipo mi-módulo.module.ts. El .module es una convención, mientras que mi-módulo es el nombre que nos hemos inventado para nuestro módulo. 

Aquí una ayudita visual de cómo vamos a organizar nuestra app (la estructura de las carpetas):

  • 📂app (creada por defecto)
    • 📂 components
      • 📦 component A
      • 📂 shared
        • 📦 component X
        • 📦 component Y
        • 📦 component Z
    • 📒 services
    • 🗃 app.module.ts

LEYENDA:

📂 = carpeta

📦 = componente

🗃 = módulo

📒 = service

Las carpetas components y shared podemos crearlas con un simple click desde VS Code, pero para crear los componentes vamos a usar Angular CLI. En realidad todo lo que vamos a hacer en este proyecto podría hacerse manualmente sin necesidad de Angular CLI, pero esta herramienta nos facilita enormemente el trabajo.

En la carpeta shared es donde incluiremos todos los componentes que pueden ser re-utilizados en distintas partes de nuestra app, por ejemplo, un navbarya que lo normal es que un navbar  esté en cualquiera de las páginas de una aplicación. 

1. Para crear un componente, abrimos otra pestaña en nuestro terminal (yo suelo tener abierta una terminal independiente, ya que la de VS Code la uso para tener siempre visible el proceso de compilación del código), y nos situamos en la carpeta donde queremos crear nuestro componente. En este caso sería en:

C:\Users\User\workspace\minioland\src\app\components\shared (master -> origin)

Ahí ponemos el comando:

ng generate component navbar

Existe la versión abreviada de este comando, que sería:

ng g c navbar

Así que usa la que más te guste. Yo me quedo con la versión abreviada.

"navbar" es el nombre que nos hemos inventado para nuestro primer componente.

🧐 Ojo con los nombres que le das a tus componentes. La convención es que uses sólo minúsculas y separes los nombres compuestos con guiones. Tipo "mi-componente-molon".

¡Y ya tenemos nuestro primer componente creado!

Si lo abres, verás que es una carpeta (sí, es un componente que a su vez es una carpeta 🙃) que tiene 4 archivos: un .html, un .css y dos .ts (archivos de typescript). El archivo .spec.ts no lo vamos a utilizar en nuestro proyecto, así que si te molesta, bórralo, o mejor, evita que se cree escribiendo este comando para crear el componente: 

ng g c navbar --skipTests

Tu terminal debería devolverte esta respuesta:

CREATE src/app/components/shared/navbar/navbar.component.html (25 bytes)
CREATE src/app/components/shared/navbar/navbar.component.ts (269 bytes)
CREATE src/app/components/shared/navbar/navbar.component.css (0 bytes)
UPDATE src/app/app.module.ts (414 bytes)

Lo que significa que el componente se ha creado con éxito y que además el módulo app.module.ts se ha actualizado él solito, añadiendo nuestro componente a su lista para informar a Angular de que hemos añadido un nuevo componente.

Si te equivocas al crear un componente que no querías crear, bórralo sin miedo, pero acuérdate de borrarlo también en las declaraciones del app.module.ts, porque si no lo haces, Angular seguirá pensando que ese componente existe, y al no encontrarlo, te dará un bonito error 🙆‍♀️.

2. Nos creamos nuestro segundo componente, al que llamaremos home, esta vez dentro de la carpeta components, porque no va a ser uno de nuestros componentes re-utilizables. 

Añadiendo Bootstrap a nuestro proyecto 💪

Me encanta Bootstrap. Y te lo dice alguien a quien también le encanta utilizar CSS puro porque es mucho más flexible. Pero Bootstrap, bien usado, es increíblemente útil para ayudarte a diseñar cualquier app a la que no pretendas añadirle un diseño muy loco. 

Peeeero eso no quita que no debas aprender CSS. Es más, yo aprendí bien CSS, pero como el CSS grid se me resiste, prefiero, por el momento, utilizar Bootstrap, porque al conocer bien CSS, Bootstrap me permite diseñar mis apps a la velocidad del rayo. ⚡

Existen varias maneras de incluir Bootstrap en un proyecto de Angular. Nosotros vamos a utilizar la que consiste en incluirlo como dependencia en los node_modules y modificar el archivo angular.json, porque me parece la manera más limpia de incluirlo sin tener que tocar nuestro archivo index.html.   

1. Necesitaremos Bootrstrap, PopperJS y jQuery, así que en la carpeta raíz de nuestro proyecto (C:\Users\User\workspace\minioland), escribimos en la terminal:

npm install bootstrap popper.js jquery --save

2. Desde VS Code abrimos el archivo angular.json y vamos a editarlo 🙈 .

Aquí tenemos que añadir Bootstrap tanto en los styles como en los scripts, y PopperJS y jQuery en los scripts. Es decir, donde haya este código:

"styles": [

 "src/styles.css"

],

 "scripts": [],

sustituirlo por este otro:

"styles": [

 "node_modules/bootstrap/dist/css/bootstrap.min.css",

 "src/styles.css"

],

"scripts": [

 "node_modules/jquery/dist/jquery.slim.js",

 "node_modules/popper.js/dist/umd/popper.min.js",

 "node_modules/bootstrap/dist/js/bootstrap.min.js"

],

Para que nuestros cambios surtan efecto, debemos reiniciar el compilador, por tanto, en nuestra terminal que esté haciendo la compilación de nuestra app, hacemos ctrl+c y volvemos a cargar el local server mediante ng serve -o .

🧐 Debemos hacer este reinicio siempre que hagamos un cambio en el archivo angular.json.

Si todo ha salido bien, ahora tu aplicación debería haber cambiado la tipografía, y ahora deberías ver la que trae Bootstrap por defecto (Segoe UI). 

También deberías poder ver si bootstrap está instalado yéndote a las dev tools, a la pestaña Elements. Ahí, dentro de la etiqueta <head>, debería estar añadido nuestro archivo de bootstrap:

bootstrap añadido

 

Primeras configuraciones del navbar component

1. Descomprime la carpeta de materiales que te descargaste al principio y crea una carpeta dentro de tu proyecto al mismo nivel de la carpeta app, dentro de la carpeta assets. Llámala img y vuelca ahí todas las imágenes.

Dentro de la carpeta app, sustituye el favicon por que el que encontrarás en los materiales del proyecto.

 📜  DISCLAIMER!  📜

Las imágenes de este proyecto son usadas con fines ilustrativos y destinados al aprendizaje, pero ojito, porque algunas pueden tener derechos de copyright, así que úsalas bajo tu responsabilidad. 

2. Vamos a getbootrstrap.com y, en documentation, buscamos navbar y copiamos una de sus opciones. 

Lo pegamos en la template del navbar component, es decir, en navbar.component.html, y eliminamos lo que no vayamos a usar, quedando el código de la siguiente manera: 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Minioland</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>

3. Es momento de sustituir lo que se ve actualmente en la pantalla por nuestro propio código. 

Lo que vamos a hacer es borrar todo el código existente en app.component.html y sustituirlo por nuestro código del navbar. Aquí es donde Angular empieza a desplegar su magia. Nuestro componente navbar actúa como un paquetito de código que tiene nombre propio (app-navbar). Este nombre se genera automáticamente cuando creamos el componente y podemos encontrarlo en el archivo navbar.component.ts. 

Este nombre propio o selector actúa como una etiqueta HTML hecha para ti, la cual podrás usar tantas veces como quieras, donde quieras. 

Para ello, entramos al archivo app.component.html, donde está el código que ahora vemos en la pantalla, y lo sustituimos por nuestra etiqueta <app-navbar>, quedando el archivo así: 

<app-navbar></app-navbar>

Y ¡tachán! Nuestro navbar component ya se ve.

Primeras configuraciones del home component

Nuestro home component va a basarse en un componente de bootstrap llamado jumbotron.

1. Vamos a la documentación de bootstrap y copiamos el código. 

2. Reemplazamos el código del home.component.html por el nuestro, quedando así: 

<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Minioland</h1> <p class="lead">Pon un Minion en tu vida.</p> </div> </div>

Creación del about component y del minions component

Dentro de la carpeta components vamos a crear dos componentesabout minions, con nuestro comando ng generate component que hemos visto antes.

Customiza tu  página de about como quieras (about.component.html). De momento no podrás verla en el navegador porque aún no hemos activado las rutas. ¡Todo a su tiempo!

La mía se ha quedado así:

<div class="container mt-3"> <h3> Fan de los Minions </h3> <p> Un poquito de lorem ipsum por aquí. </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eveniet labore similique nesciunt at dolore impedit autem quibusdam perferendis unde. Recusandae impedit iste voluptatem aperiam, sapiente cumque nihil doloremque sit nam magni dolorem, quisquam ad eligendi minima earum, iusto nulla nisi at voluptas! Quas quis placeat corrupti quaerat dolores minima molestiae voluptates nobis, quo, unde rerum modi, eaque commodi! Numquam molestiae perferendis molestias, voluptatem nobis cumque unde ipsam quisquam alias, vel animi sapiente labore eius saepe sint explicabo magni eligendi eveniet blanditiis facere tempora quia? Deserunt nesciunt molestiae labore aliquam natus fuga, sunt ratione assumenda commodi libero, nobis dolorem quibusdam. </p> </div>

¡BRAVO! 

Y hasta aquí la parte #1 de esta serie de posts sobre cómo construir una sencilla aplicación con Angular. Si quieres seguir aprendiendo, aquí tienes la parte #2.

Más recursos de aprendizaje

Aprender Angular a través de tutoriales web y cursos online está genial, pero si necesitas un apoyo en forma de libro, puede que éstos te sirvan de ayuda:

La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos 😌.

COMPARTIR ES VIVIR

Si crees que este post puede serle útil a alguien, ¡compártelo!

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar