Creando el primer proyecto web Angular «Hola mundo». Preparación del entorno Node.js, Angular y Visual Studio Code.

• Angular.
• Node.js.
• Instalar Node.js.
• Instalar Angular desde npm.
• Instalar Visual Studio Code.
• Crear aplicación Hola Mundo con Angular.

Angular

Angular se erigió como uno de los pioneros entre los frameworks de desarrollo front-end al adoptar e impulsar el patrón de arquitectura MVC (Modelo-Vista-Controlador). Este enfoque promueve una clara separación de responsabilidades: el modelo se encarga de la gestión y estructura de los datos, el controlador alberga la lógica de negocio y la vista se ocupa exclusivamente de la capa de presentación. Esta división no solo facilita el desarrollo de aplicaciones altamente estructuradas y mantenibles, sino que también optimiza la colaboración en equipos de trabajo y mejora la escalabilidad de los proyectos.

La evolución de estos ecosistemas de desarrollo, con Angular y React a la vanguardia, ha marcado hitos significativos en la ingeniería de software. Un aporte trascendental de Angular fue la introducción de TypeScript como lenguaje estándar para el desarrollo de aplicaciones. TypeScript, al ser un superconjunto tipado de JavaScript, incorpora tipos estáticos y características de la programación orientada a objetos, lo que permite detectar errores en tiempo de desarrollo y escribir código más robusto y autodocumentado. Dado que los navegadores interpretan únicamente JavaScript, el código TypeScript es sometido a un proceso de transpilación, transformándose en JavaScript compatible durante la fase de construcción.

Estos frameworks modernos no se limitan a ofrecer un conjunto de herramientas avanzadas para agilizar el desarrollo; constituyen ecosistemas integrales que proporcionan una base funcional sólida y altamente configurable. Esta solidez estructural, combinada con una arquitectura modular y basada en componentes, otorga a los desarrolladores la flexibilidad necesaria para diseñar, personalizar y adaptar las aplicaciones a los requisitos específicos de cada negocio, garantizando así no solo una alta calidad técnica, sino también una perfecta alineación con los objetivos estratégicos.

Node.js

Node.js constituye un entorno de ejecución para JavaScript del lado del servidor, construido sobre el motor V8 de Google Chrome. Esta plataforma permite la creación de servidores web y aplicaciones de red altamente escalables, ofreciendo una alternativa contemporánea a soluciones tradicionales como IIS o Apache. Su diseño no solo moderniza el desarrollo backend, sino que establece un nuevo paradigma en términos de eficiencia y rendimiento.

La principal fortaleza de Node.js reside en su arquitectura asíncrona y dirigida por eventos, la cual gestiona las operaciones de E/S de manera no bloqueante. Este modelo permite atender una gran cantidad de conexiones concurrentes sin incurrir en la sobrecarga típica de los modelos basados en hilos, resultando en un manejo excepcionalmente eficiente de peticiones HTTP y una optimización superior de los recursos del sistema.

Una de sus contribuciones más transformadoras al ecosistema de desarrollo es la unificación del lenguaje de programación a través de toda la stack tecnológica. Al adoptar JavaScript tanto para el frontend como para el backend, Node.js elimina la fragmentación contextual que históricamente ha existido en el desarrollo web, permitiendo a los equipos de trabajo operar con un conjunto coherente de herramientas y paradigmas. Esta homogeneización no solo acelera el ciclo de desarrollo, sino que también fomenta la reutilización de código y facilita la mantenibilidad de las aplicaciones a largo plazo.

Instalar Node.js

Para desarrollar nuestro primer proyecto Angular, descargaremos e instalaremos Node.js en nuestro equipo. Podemos hacerlo descargando el instalador desde:

• Node.js Descarga Node.js.

Podremos descargar Node.js en varios formatos, para equipos Windows, podemos descargar el Windows Installer (.msi) o bien el .zip, que descomprimiremos y tendremos Node.js sin necesidad de instalar. Si optamos por el .zip, tendremos que agregar la carpeta donde lo hayamos descomprimido a la variable de entorno PATH del sistema, para tener acceso desde cualquier consola de MS-DOS (cmd o Símbolo de sistema) a los comandos de Node.js. El instalador .msi realizará esta configuración automáticamente.

Tras la instalación, abriremos una ventana de MS-DOS (símbolo de sistema o cmd) como administrador, dado que tendremos que instalar componentes:

Para obtener la versión de Node.js, introduciremos el comando:

Si no se encuentra el comando anterior, deberemos revisar la variable de entorno PATH del sistema, que debe incluir la ruta de instalación de Node.js. Dicha variable, suele tener el nombre NVM_SYMLINK, con valor la carpeta de instalación de Node.js:

Y en la variable de entorno PATH, debe existir una referencia a esa variable NVM_SYMLINK:

Instalar Angular desde npm

Para instalar Angular, desde una ventana de MS/DOS (cmd) ejecutaremos el comando:

En este caso, instalará la última versión estable disponible, que para el momento de realizar este tutorial es la 20.3.5, con el comando:

Nos devolverá la versión de Angular instalada:

Si quisiéramos instalar una versión concreta de Angular, podremos ejecutar el comando (por ejemplo para instalar la versión 17.3.7):

Instalar Visual Studio Code

Como IDE de desarrollo usaremos Visual Studio Code, en el siguiente tutorial explicamos cómo descargarlo e instalarlo:

• Mi primera aplicación Python Hola Mundo con IDE Visual Studio Code y bases del lenguaje operadores condicionales bucles tipos de datos.

Crear aplicación Hola Mundo con Angular

Para crear un primer proyecto Angular, crearemos una carpeta para alojar todos los proyectos Angular, por ejemplo:

D:GitAngular

Abriremos Visual Studio Code y abriremos la carpeta creada, desde el menú «File» – «Open folder…»:

Seleccionaremos la carpeta para los proyectos Angular:

Marcaremos como origen de confianza:

Pulsaremos «Control» + «Ñ» para abrir una ventana de terminal:

Para crear un proyecto nuevo con preguntas interactivas, introduciremos el comando:

Puesto que hemos elegido la creación de un proyecto de forma «interactiva», el asistente nos irá haciendo algunas preguntas. En primer lugar elegiremos el tipo de estilos, en este caso elegiremos «CSS»:

La siguiente pregunta:

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?

En este caso, el asistente para crear un nuevo proyecto Angular nos indica si queremos activar la técnica «SSR» (Server-Side Rendering) es un método en el que Angular genera el contenido HTML de la aplicación en el servidor antes de enviarlo al cliente (navegador). En lugar de cargar una aplicación Angular vacía y dejar que JavaScript construya el DOM en el navegador, el servidor envía una página ya renderizada al cliente. En general este método mejora el SEO (Search Engine Optimization) y el rendimiento inicial está optimizado. Requiere de un servidor Node.js. La otra técnica es Static Site Generation (SSG / Prerendering): se trata de una técnica donde se generan páginas HTML estáticas en el momento de la compilación, basándose en el contenido y las rutas definidas. Estas páginas se sirven directamente al cliente sin necesidad de renderización en tiempo de ejecución. En general proporciona mayor velocidad de carga porque las páginas ya están renderizadas y el SEO es también más sencillo.

En nuestro proyecto, pulsaremos «n» para generarlo como una aplicación Angular tradicional, sin soporte SSG ni SSR. De esta forma, todo el contenido se renderizará en el navegador. Por lo tanto, para este ejemplo, pulsaremos «n» e INTRO:

Se iniciará la creación de la aplicación Angular, puede tardar varios minutos porque descargará todos los paquetes necesarios para su ejecución:

Otra forma de crear una aplicación Angular es pasándole por comando todos los argumentos para que no nos haga preguntas. Por ejemplo, para la aplicación anterior, podríamos haber ejecutado el comando:

En el caso de que queramos crear una nueva aplicación sin descargar las dependencias, ejecutaremos el comando:

Y cuando queramos instalar las dependencias, ejecutaremos (en la carpeta del proyecto), el comando:

Una vez creado el proyecto, si queremos compilarlo, desde la carpeta del proyecto, ejecutaremos:

La primera vez nos preguntará si queremos compartir datos del proyecto con Angular Team, responderemos «n»:

Se compilará el proyecto y se ejecutará el servidor web:

Al haber indicado el argumento -o, se abrirá un navegador web con la URL:

http://localhost:4200/

Y nuestra primera aplicación Angular «Hola mundo» funcionando:

Si quisiéramos iniciar el servicio web Angular con otro puerto, ejecutaríamos el siguiente comando (para usar el puerto 8080):