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

Última actualización: 30 junio, 2022

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: []; 


🔐 CONTENIDO RESTRINGIDO

Este contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.

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

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
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[...]
Claves para entender Angular – Qué es y cómo se utiliza
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[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

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

  1. Hey muy buena la redacción, muy didáctico y el contenido de los tutoriales es el justo y necesario. Excelente !

Deja un comentario

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

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.

Cerrar