Última actualización: 6 abril, 2023Angular 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
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 o 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:
tipos estrictos (en inglés, strong typing): de ahí saca TypeScript su nombre. Significa que cada 
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:
CONTENIDO RESTRINGIDO
El resto del 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.json, porque 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 styles. 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": []
- 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:
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!
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
¡Muchas gracias por tus palabras, Leonardo! Me alegro de que te haya servido ?.
Hey muy buena la redacción, muy didáctico y el contenido de los tutoriales es el justo y necesario. Excelente !
Me alegro de que te haya servido, Mika! ?
Genial, muchas gracias
Excelente. Muchas Gracias.