Claves para entender Angular – Qué es y cómo se utiliza

Última actualización: 1 noviembre, 2020

Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).

Frameworks

¿Pero qué es un framework? En español podríamos traducirlo como "marco de trabajo", aunque me parece más acertado definirlo como una caja bien hermosa de herramientas listas para usar, ordenada por compartimentos y sub-secciones. 

Eso es lo que nos ofrece Angular, un set de herramientas de desarrollo de software para que, desde un solo sitio, podamos tener acceso a todas ellas y crear apps modernas con un rendimiento óptimo. 😮

SPAs

¿Y qué es una SPA? Una app que sólo tiene un documento HTML en su raíz, aunque contenga miles de URLs distintas. Aunque cambiemos de URL, nuestro documento HTML (nuestra página) nunca cambia. Esto es genial porque aporta una experiencia de usuario muy reactiva y rápida. 

En una SPA, si necesitamos obtener datos de un servidor (en inglés, server), los cargamos "en la trastienda" de manera que el usuario nunca tenga que abandonar nuestra app. JavaScript (en adelante, JS) se encarga de eso cambiando el DOM durante el runtime. Esto se refleja con la ausencia del icono de "cargando" al lado de nuestro cursor cuando cambiamos de URL.

Versiones de Angular

Antes del Angular que hoy en día conocemos, existió AngularJS (también conocido como Angular 1). Podemos clasificar Angular en dos grandes versiones: AngularJS y "simplemente" Angular. En 2016, el equipo de Google re-escribió completamente el código de AngularJS, por eso el nuevo framework, conocido como simplemente "Angular", no tiene mucho que ver con AngularJS.

Si estás empezando un nuevo proyecto, lo suyo es que empieces con Angular y te olvides de AngularJS, porque es un tecnología obsoleta

Dentro de la versión de Angular, Google ha ido sacando versiones cada 6 meses aproximadamente, saltándose la v.3.

AngularJS

Angular
Angular 2
Angular 4
Angular 5
Angular 6
Angular 7
Angular 8
.
.
.

Con todo este lío de versiones, no es raro encontrar información en internet hablando de Angular 2, cuando en realidad no se refieren a esa versión específica del framework, sino simplemente a la versión general de Angular, en lugar de a AngularJS.

El equipo de Angular se encarga de escribir versiones compatibles con las versiones anteriores, por tanto, aunque la versión 8 tenga nuevas funcionalidades con respecto a sus compañeras previas, eso no significa que no puedas seguir usándolas ni que vayan a dejar de funcionar. 😌

Lo que debes saber antes de empezar con Angular

Antes de sumergirte en el mundo de Angular deberías tener una base sólida de JavaScript. 👩‍🏫 Aquí tienes una serie de posts sobre temas básicos de JS para ayudarte con eso, y una categoría sobre temas de JS intermedio. Dentro de esta categoría encontrarás una serie sobre Webpack, que es muy recomendable que conozcas porque te ayudará a entender cómo se estructura un proyecto de Angular. 

TypeScript

Otro aspecto a tener en cuenta es el lenguaje de programación con el que escribimos el código de una app con Angular. Angular utiliza TypeScript (en adelante, TS), un lenguaje basado en JS pero con características mejoradas, por eso se dice que es un superset de JS. Pero no te preocupes, porque no necesitas saber TS para empezar a aprender Angular, ya que te irás familiarizando con sus características en paralelo a tu aprendizaje de Angular. 🙂

Pero si crees que aún así, necesitas hacer un curso de TS, en Udemy hay muchos, y dentro del curso de Angular de Academind encontrarás una sección sobre TS.

Dicho esto, te resumo algunas mejoras que incorpora TS con respecto a JS:

  • ☝ tipos estrictos (en inglés, strong typing): de ahí saca TypeScript su nombre. Significa que cada tipo de dato debe estar definido cuando lo declaramos, es decir, especificar si es un número, un string, etc. Lo contrario de esto sería dynamic typing weak typing.
  • ✌ no se ejecuta en el navegador, necesita compilarse a JS para poder ejecutarse. De ahí que necesitemos la CLI de Angular, que se encargará de esto automáticamente. 
  • 👉 sintaxis:
propiedad : tipo de dato;
Ejemplos:
myProperty: string;
myObj: {};
myArr: []; 


Cómo empezar a usar Angular - Primeros pasos

Vamos a ver cómo crear una app con Angular desde cero. Para ello utilizaremos la command line interface (CLI) oficial de Angular. Es lo más recomendable, ya que un proyecto de Angular está construido sobre unas bases complejas, y necesita trabajar con una serie de herramientas como por ejemplo TS. Así que la CLI nos facilita y optimiza enormemente el trabajo.

La CLI necesita un par de cosas para funcionar, que son nodeJS y npm. Puedes descargar nodeJS desde su web, en la opción que dice "Recommended for Most Users", y seguir los pasos comunes de una instalación (siguiente, siguiente, siguiente, ... 🙃 ).

Npm viene junto con nodeJS, así que no tienes que preocuparte de instalarlo. Npm se utiliza en un proyecto de Angular para lidiar con dependencias de código (en inglés, dependencies). 

Una vez finalizada la instalación, volvemos a la web de la CLI y seguimos los pasos para crear una app con Angular. 

1. Abre tu terminal (yo uso Cmder) y escribe npm -g @angular/cliPuede que la terminal te devuelva errores, pero mientras veas al final un mensaje parecido a este:

+ @angular/cli@8.3.22

signficará que todo ha salido bien. No importa si tu versión es anterior o superior a la mía, te debería funcionar igual. 

2. Navegamos hasta la carpeta en nuestro pc donde queramos crear nuestro proyecto con Angular. Ahí dentro escribimos el comando ng new [nombre de tu app]que en mi caso es ng new my-first-app.

Lo normal es que la CLI te haga una serie de preguntas, como si quieres añadir routing o qué tipo de styles quieres usar. Puedes darle a enter y eso te seleccionará la opción por defecto. Hecho esto, ahora es cuando más tiempo debería tomarse tu terminal para crear la app, porque está construyendo la estructura básica de un proyecto de Angular, con sus carpetas y subcarpetas que ahora verás.

Una vez terminado el proceso, navega desde tu terminal hasta esa nueva carpeta que Angular acaba de crear, llamada my-first-app. Desde ahí, escribe ng servelo que debería compilar tu código y devolverte un mensaje final tipo:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

⛵ Ese es el puerto habitual en el que se despliega Angular, pero puede que en tu caso sea otro. Asegúrate de no estar usándolo antes de escribir el comando.

También puedes añadirle el banderín -o ng serve (ng serve -olo cual te abrirá un local server directamente sin que tengan que hacer click en ninguna URL, e iniciará un proceso de compilación automática de tus cambios cada vez que guardes. 

Si vas a ese localhost, deberías ver una UI como esta, al menos en la versión 8 de Angular:

angular start page

¡Genial! Ahí tienes una serie de recursos dignos de explorar, pero mejor acaba este artículo antes para no dejarte demasiados frentes abiertos.😛 Después, si te interesa profundizar en estos temas, nada mejor que este curso de Angular, a mí me sirvió muchísimo.

Deja abierta la terminal donde hayas escrito ng serve, porque si la cierras, perderás la sincronización con tu app porque interrumpirás el proceso de compilación 😖. Pero sí así lo deseas, dale a Ctrl+c.

Prueba ahora a echarle un vistazo a la estructura de carpetas que ha creado Angular por ti en tu carpeta my-first-app. Verás que tiene esta pinta 👉:

Si es la primera vez que ves una estructura así, quizás te parezca chino mandarín. Pero si sabes algo sobre Webpack, recordarás que con Webpack se construye una estructura parecida, con una carpeta src donde va todo el código que escribamos sobre nuestra app, más una carpeta de node_modules donde almacenar todos nuestros paquetes, más un archivo package.json donde se listan todas las dependencies de nuestro proyecto. 

📁e2e
📁node_modules
📁src
📝.editorconfig
📝.gitignore
📝angular.json
📝browserslist
📝karma.config
📝package.json
📝package-lock.json
📝README.md
📝tsconfig.app.json
📝tsconfig.spec.json
📝tslint.json

Cómo editar un proyecto con Angular

Ya sabemos cómo crear una app con Angular, ahora vamos a aprender los pasos básicos para editarla.

1. Abrimos nuestro proyecto (en mi caso my-first-app) con un editor de código como vsCode. Así deberías ver la estructura de carpetas que he detallado arriba. La mayoría de archivos son configuraciones que Angular se encarga de hacer, así que no es necesario que los toquemos

Como hemos dicho antes, todo nuestro desarrollo lo haremos en la carpeta src. Ahí dentro está la carpeta app, que contiene, entre otros, un archivo llamado app.component.html. En la versión 8 de Angular, la que estoy utilizando para este artículo, el contenido de ese archivo es mucho más amplio que en versiones anteriores, pero es principalmente porque le han metido un bloque de código bastante amplio de inline CSS

En cualquier caso, fíjate en lo que dice al principio del archivo:

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

Vamos, que ese código está ahí sólo como ejemplo para que veas el código que hay detrás de la página que puedes ver en tu navegador. 

Puedes pasar del inline CSS por el momento, entre otras cosas porque nunca escribiremos CSS directamente en el archivo HTML, porque no me parece la mejor práctica del mundo, y para eso están los archivos CSS. 🙄

Alrededor de la línea 300 acaba el </style> y empieza la verdadera plantilla HTML, que es lo que nos interesa. Si te fijas, a partir de ahí el código se parece mucho a un código HTML normal (salvo algunos detalles que ahora veremos) y coincide con el resultado en el navegador. Intentemos editar algo para ver cómo funciona. 

2. Por ejemplo, podemos añadir algo a este <h2>:

  <h2>Resources</h2>

como:

  <h2>Resources y más resources</h2>

Al guardar tu código, verás que tu app se ha actualizado automáticamente y ya puedes ver tus cambios en el navegador.

Vayamos a una parte un poco más rara, esa donde se puede leer:

<span>{{ title }} app is running!</span>

Eso coincide casi-casi con el texto que podemos ver en el navegador "my-first-app app is running!". Ahí es donde vemos una prueba de cómo funciona Angular. Porque ese {{ title }} está vinculado a algo externo, fuera de la plantilla HTML. Con eso podemos intuir que Angular nos permite combinar un HTML estático con elementos dinámicos, aunque aún no sepamos cómo funciona exactamente ese mecanismo.

Organización de un componente

Ese mecanismo es parte de una de las piezas clave de Angular: los componentes. Por ahora, basta con saber que la página que vemos en el navegador corresponde a un código ordenado en una carpeta llamada app, que tiene cuatro archivos (sin contar el app.module.ts):

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts

Esa es la estructura típica de un componente: una carpeta con esos cuatro tipos de archivo. El código del app.component.ts es código TypeScript que Angular se encargará de convertir a JavaScript compatible con todos los navegadores. 

Contenido estático vs. contenido dinámico

Si nos fijamos, vemos que hay una línea con el contenido 

title = 'my-first-app';

¡Ahí parece estar la conexión que buscábamos 😮! De hecho, desde vsCode, si vas al app.component.html y haces ctrl+click izq. sobre {{ title }} , te llevará al archivo de donde proviene (al app.component.ts). 

Prueba a cambiar el contenido de title en el app.component.ts. Angular se re-compilará y verás que tus cambios se reflejan en el navegador.

  title = 'my-really-first-app';

Este mecanismo de mostrar contenido dinámico desde un archivo de TS a otro de HTML se llama data bindingAhora no es precisamente dinámico que digamos, porque estamos escribiendo nosotros el texto, pero podría ser perfectamente información solicitada y obtenida de una base de datos alojada en un servidor.


Angular en la consola de las developer tools

Si estás acostumbrad@ a crear webs, aunque sean sencillas, sabrás que, al inspeccionar una página (botón derecho --> inspeccionar) en la pestaña Elements te muestra un esqueleto HTML completo de tu web, con su respectivo CSS a la derecha. Angular no funciona así.

Si inspeccionar tu web actual, verás que en el <body> no hay nada más que algunos scripts de JS y una extraña etiqueta HTML:

<app-root></app-root>

¿Te suena de algo? 🤔 Porque es el mismo nombre que tenemos en el app.component.tsen la propiedad selectorEn términos muy generales, lo que ha hecho Angular es crear una etiqueta de HTML personalizada llamada <app-root>cuyo contenido hemos definido en el app.component.html. ¿Pero cómo sabe Angular que debe mostrar esa etiqueta? Porque así lo tiene ya configurado en el archivo index.html. ¿Ves la etiqueta ahí dentro?

Ese es en realidad el código que se muestra en las dev tools, sin los scripts de JS, porque son inyectados dinámicamente. Este tema y muchos otros son los que aprendí en este curso de Angular.


Código dinámico

Vamos a deshacernos de todo el contenido del app.component.html y crear el nuestro propio.

1. Creamos un input de tipo text y un párrafo con un name dinámico, aunque no lo hayamos configurado todavía.

<input type="text">
<p>{{ name }}</p>

2. Vamos al app.component.ts y cambiamos title por nameLe damos el nombre que queremos.

  name = 'Pepe';

Con esto ya vemos en nuestro navegador el campo y el nombre "Pepe". El objetivo aquí poder escribir cualquier cosa en el campo y que eso se refleje automáticamente en el name, mostrando cualquier cosa que escribamos en el campo en tiempo real. Podemos conseguir esto usando una Directiva llamada ngModel, dándole el valor de nuestra propiedad dinámica (name). 

<input type="text" [(ngModel)]="name">

Para usar una directiva no basta con utilizar su nombre, ya que es necesario avisar a Angular de qué directiva queremos usar. ¿Y cómo lo avisamos? Yendo al archivo app.module.ts e informándole ahí.

La directiva ngModel está contenida dentro de un paquete de Angular (esto es a lo que me refería cuando hablaba de que Angular es como una caja de herramientas con compartimentos), así que sólo tenemos que informarle de que queremos usar (importar, más concretamente) un paquete llamado formsque contiene un sub-paquete (también llamado "módulo") llamado FormsModuleY por fin, dentro de ese módulo está el ngModel, pero eso no necesitamos especificarlo

El import debemos hacerlo al principio del archivo e incluirlo también en el array "imports".

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],

¡Y ya lo tenemos! Si escribes cualquier cosa en el campo, se debería ver reflejada en el párrafo de abajo. 👏

Pero esto es sólo el principio. Para aprender a usar Angular en profundidad, puedes echarle un vistazo a estos posts englobados dentro de una categoría sobre temas básicos de Angular. 🤓




Extra: cómo añadir Bootstrap a un proyecto de Angular

Si lo que quieres es centrarte en aprender Angular y que CSS no te traiga por la calle de la amargura si no lo dominas del todo, puedes usar un UI framework como Bootstrap. Veamos todos los detalles para su integración con un proyecto de Angular.

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.jsonporque me parece la manera más limpia de incluirlo sin tener que tocar nuestro archivo index.html.   

  • En la carpeta raíz de nuestro proyecto (en mi caso: C:\Users\User\workspace\my-first-app), escribimos en la terminal:

npm install bootstrap --save

  • Desde VS Code abrimos el archivo angular.json y lo editamos.

Aquí tenemos que añadir Bootstrap en los stylesEs 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": []
  • Para que nuestros cambios surtan efecto, debemos reiniciar el compilador, por tanto, en la 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.

Para comprobar que has añadido Bootstrap correctamente, ve a tu navegador y abre las dev tools. En la pestaña Elements deberías encontrarlo, en la etiqueta <head>.

🧐 Ojo, porque Bootstrap es el nombre de un UI framework, y no debes confundirlo con el contenido inicial del app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Esa propiedad no tiene nada que ver con el UI framework, sino con el punto de inicio o arranque de cualquier aplicación de Angular, que por defecto es el AppComponent. Porque eso es lo que significa "bootstrap" en español: arranque, arrancar, impulsar. 🤓

Practicar lo aprendido

Una vez aprendido lo básico, te recomiendo que sigas aprendiendo con cursos como este, y que explores y crees tus propios proyectos. Aquí algunos ejemplos:




THE END!

¡Y hasta aquí el post de hoy! Espero que hayas aprendido algo nuevo 😊.  Si te queda alguna duda, ¡nos vemos en los comentarios!

Si quieres ayudar a hacer este blog sostenible, puedes invitarme a un café digital ツ
¡Gracias!¡Gracias!

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í. 

Otros artículos que pueden interesarte

Guía de iniciación al data binding en Angular
¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos[...]
Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

1 comentario en «Claves para entender Angular – Qué es y cómo se utiliza»

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