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.
Verás que uso los términos de programación directamente en inglés o hago una traducción la primera vez que aparecen. Por eso, es muy recomendable que sepas inglés, ya que es el lenguaje universal y 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.
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.
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:
¡¿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:
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:
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ódulo. Vamos, 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.ts. Lo 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 navbar, ya 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:
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:
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:
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:
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 navbarcomponent, es decir, en navbar.component.html, y eliminamos lo que no vayamos a usar, quedando el código de la siguiente manera:
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 selectoractú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í:
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.
2. Reemplazamos el código del home.component.html por el nuestro, quedando así:
Minioland
Pon un Minion en tu vida.
Creación del about component y del minions component
Dentro de la carpeta components vamos a crear dos componentes: about y 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í:
Fan de los Minions
Un poquito de lorem ipsum por aquí.
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.
¡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
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Max Schwarzmüller
Fernando Herrera
Si necesitas 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 .
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win .
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Si crees que este post puede serle útil a alguien, ¡compártelo!:
4 comentarios en «Construye Minioland: Tu primera aplicación con Angular | Parte #1»
Muchas gracias por tus palabras, Hector! Me alegro de que te haya servido 🙂
Magnificas tus explicaciones…que maravilla…aquí voy aprendiendo de que va esto de Angular…hay demasiado contenido desinformativo y hasta desalentador, porque no todos saben enseñar…muchos cursos por youtube de gente explicando Angular u otro tema en especifico que es una grabación de ellos explicándose a ellos mismos, haciendo de cuenta que los principiantes manejan el mismo nivel de terminologías que ellos dominan…tu en cambio explicas de donde salen los detalles y hacia donde van y que se persigue con ello…Felicidades!!!…tienes el don de la enseñanza, no cualquiera lo posee.
¡Hola David!
He vuelto a subir el listado, espero que ahora ya te aparezca correctamente 🙂 .
Hola , muy buena guia.
Deseo ver el listado de libros de Amazon que recomiendas pero no hay nada, esta en blanco.¿Podrias volver a subir el listado de libros que recomiendas? Muchas gracias.
Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información
Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.
Muchas gracias por tus palabras, Hector! Me alegro de que te haya servido 🙂
Magnificas tus explicaciones…que maravilla…aquí voy aprendiendo de que va esto de Angular…hay demasiado contenido desinformativo y hasta desalentador, porque no todos saben enseñar…muchos cursos por youtube de gente explicando Angular u otro tema en especifico que es una grabación de ellos explicándose a ellos mismos, haciendo de cuenta que los principiantes manejan el mismo nivel de terminologías que ellos dominan…tu en cambio explicas de donde salen los detalles y hacia donde van y que se persigue con ello…Felicidades!!!…tienes el don de la enseñanza, no cualquiera lo posee.
¡Hola David!
He vuelto a subir el listado, espero que ahora ya te aparezca correctamente 🙂 .
Hola , muy buena guia.
Deseo ver el listado de libros de Amazon que recomiendas pero no hay nada, esta en blanco.¿Podrias volver a subir el listado de libros que recomiendas? Muchas gracias.