Capítulo 012. Instalación de Visual Studio Code y .NET 9

Introducción

En este capítulo instalaremos Visual Studio Code y el SDK de .NET 9, dos herramientas fundamentales para el desarrollo de aplicaciones con Angular y ASP.NET Core.

Visual Studio Code será nuestro editor de código, mientras que .NET 9 proporcionará el entorno de desarrollo y ejecución necesario para crear y ejecutar aplicaciones ASP.NET Core.

---

¿Qué es Visual Studio Code?

Visual Studio Code (VS Code) es un editor de código fuente gratuito desarrollado por Microsoft. Se caracteriza por ser ligero, rápido, altamente personalizable y compatible con múltiples lenguajes y plataformas.

Puede utilizarse en:

• Windows

• Linux

• macOS

Además, es una herramienta muy popular tanto para desarrollo frontend como backend, lo que la convierte en una excelente opción para trabajar con Angular y ASP.NET Core en un mismo entorno.

Principales características

Entre las características más destacadas de Visual Studio Code se encuentran:

• Resaltado de sintaxis.

• Autocompletado inteligente.

• Depuración integrada.

• Terminal incorporada.

• Integración con Git.

• Amplio catálogo de extensiones.

• Compatibilidad con Angular, TypeScript y .NET.

---

Descargar Visual Studio Code

Para descargar Visual Studio Code, abre tu navegador y accede al sitio oficial de Microsoft:

https://visualstudio.microsoft.com

Desde la página principal podrás encontrar la familia de productos Visual Studio, incluyendo:

• Visual Studio

• Visual Studio Code

Selecciona la opción Visual Studio Code.

Elegir el sistema operativo

Visual Studio Code está disponible para varios sistemas operativos:

• Windows

• macOS

• Linux

Descarga la versión correspondiente a tu sistema.

Por ejemplo, si utilizas Windows, selecciona la descarga para Windows.

---

Instalar Visual Studio Code

Una vez descargado el instalador:

1. Ejecuta el archivo descargado.

2. Acepta los términos de licencia.

3. Sigue los pasos del asistente de instalación.

4. Haz clic en Siguiente hasta completar el proceso.

5. Finaliza la instalación.

La instalación es sencilla y normalmente toma solo unos minutos.

---

Instalación del SDK de .NET 9

Instalar Visual Studio Code no es suficiente para desarrollar aplicaciones ASP.NET Core.

También necesitamos instalar el SDK de .NET 9, que incluye:

• El compilador de C#.

• Las herramientas de línea de comandos de .NET.

• ASP.NET Core.

• Las bibliotecas necesarias para crear y ejecutar aplicaciones .NET.

---

Descargar .NET 9

Abre tu navegador y visita el sitio oficial de .NET:

https://dotnet.microsoft.com

Desde la página principal:

1. Haz clic en Download.

2. Selecciona la versión .NET 9.

3. Descarga el SDK correspondiente a tu sistema operativo.

Importante: Asegúrate de descargar el SDK y no únicamente el Runtime. El SDK incluye todas las herramientas necesarias para desarrollar aplicaciones.

---

Instalar .NET 9

Una vez descargado el instalador:

1. Ejecuta el archivo.

2. Sigue las instrucciones del asistente.

3. Haz clic en Instalar.

4. Espera a que finalice el proceso.

5. Cierra el instalador cuando la instalación se haya completado correctamente.

Al igual que Visual Studio Code, la instalación es bastante sencilla y guiada.

---

Verificar la instalación de .NET

Después de instalar .NET, es recomendable verificar que todo haya quedado correctamente configurado.

En Windows

Presiona:

Windows + R

Escribe:

cmd

y presiona Enter.

En Linux o macOS

Abre una terminal.

Ejecutar el comando de verificación

En la consola, escribe:

dotnet --version

Si la instalación fue exitosa, aparecerá un resultado similar al siguiente:

9.0.xxx

El número exacto puede variar según la actualización instalada, pero debe corresponder a una versión de .NET 9.

---

¿Por qué necesitamos .NET 9?

Durante este curso utilizaremos .NET 9 para desarrollar el backend de nuestra aplicación.

Con .NET podremos:

• Crear APIs REST.

• Implementar lógica de negocio.

• Conectarnos a bases de datos.

• Gestionar autenticación y autorización.

• Exponer servicios para ser consumidos por Angular.

En conjunto, Angular actuará como frontend y ASP.NET Core como backend, conformando una arquitectura moderna ampliamente utilizada en aplicaciones empresariales.

---

Resumen

En este capítulo instalamos las herramientas necesarias para trabajar con ASP.NET Core utilizando Visual Studio Code:

Visual Studio Code

Herramienta utilizada como editor de código para el desarrollo frontend y backend.

.NET 9 SDK

Entorno de desarrollo que incluye las herramientas necesarias para crear y ejecutar aplicaciones ASP.NET Core.

Comando de verificación:

dotnet --version

Si el comando muestra una versión de .NET 9, significa que la instalación se realizó correctamente.

Con Visual Studio Code y .NET instalados, nuestro entorno de desarrollo ya está preparado para comenzar a crear aplicaciones utilizando Angular 19 y ASP.NET Core 9.

Capítulo 010. Instalación de Angular CLI

Introducción

Una vez que hemos instalado y configurado Node.js, el siguiente paso es instalar Angular CLI, la herramienta oficial que nos permitirá crear, ejecutar, compilar y administrar proyectos Angular desde la línea de comandos.

Angular CLI simplifica enormemente el desarrollo, ya que automatiza tareas comunes y proporciona una experiencia de trabajo uniforme en todos los proyectos Angular.

---

¿Qué es Angular CLI?

Angular CLI (Command Line Interface) es la herramienta oficial de Angular para la administración de proyectos.

Con Angular CLI podemos:

• Crear nuevos proyectos Angular.

• Generar componentes, servicios y otros elementos.

• Ejecutar la aplicación en modo desarrollo.

• Compilar el proyecto.

• Ejecutar pruebas automatizadas.

• Generar versiones optimizadas para producción.

• Actualizar proyectos a nuevas versiones de Angular.

A lo largo de este curso utilizaremos Angular CLI de forma constante, por lo que es fundamental tenerlo correctamente instalado.

---

Configuración previa en Windows

Si estás utilizando Windows, es recomendable ejecutar un comando de configuración antes de instalar Angular CLI.

Abrir Windows PowerShell

Presiona la tecla Windows y escribe:

PowerShell

A continuación, selecciona Windows PowerShell o PowerShell y ábrelo.

---

Ejecutar el comando de configuración

Dentro de PowerShell, ejecuta el siguiente comando:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Cuando Windows solicite confirmación, escribe:

Y

o

Sí

según el idioma de tu sistema operativo.

Este comando permite la ejecución de scripts firmados en el contexto del usuario actual y ayuda a evitar problemas relacionados con las políticas de ejecución de PowerShell.

Nota: Este paso suele ser necesario únicamente en Windows.

---

Instalar Angular CLI

Una vez completada la configuración, abre una terminal o consola de comandos (CMD) y ejecuta el siguiente comando:

npm install -g @angular/cli@19.0.0

Explicación del comando

• npm install: instala un paquete mediante npm.

• -g: realiza una instalación global para que el comando pueda utilizarse desde cualquier ubicación.

• @angular/cli: paquete oficial de Angular CLI.

• @19.0.0: versión específica que utilizaremos durante el curso.

Es recomendable utilizar la misma versión indicada para garantizar que todos los ejemplos y ejercicios funcionen de la misma manera.

---

Verificar la instalación

Una vez finalizada la instalación, podemos comprobar que Angular CLI se instaló correctamente ejecutando:

ng version

También es posible utilizar:

ng --version

Si la instalación fue exitosa, obtendremos información similar a la siguiente:

Angular CLI: 19.0.0

Node: 20.16.0

Package Manager: npm

OS: win32 x64

La versión exacta de algunos componentes puede variar, pero debe mostrarse Angular CLI versión 19.0.0.

---

El comando ng

El comando principal para interactuar con Angular CLI es:

ng

A través de este comando realizaremos prácticamente todas las tareas relacionadas con nuestros proyectos Angular.

Por ejemplo:

ng new

Permite crear un nuevo proyecto.

ng serve

Ejecuta la aplicación en modo desarrollo.

ng generate component

Genera nuevos componentes.

Aprenderemos estos comandos en detalle durante los próximos capítulos.

---

Resumen

En este capítulo instalamos Angular CLI 19, la herramienta oficial de Angular para la gestión de proyectos y tareas de desarrollo.

Los pasos realizados fueron:

1. Configurar PowerShell (solo en Windows).

2. Instalar Angular CLI globalmente mediante npm.

3. Verificar que la instalación fue exitosa.

Comandos utilizados:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

npm install -g @angular/cli@19.0.0

ng --version

Con Angular CLI correctamente instalado, ya estamos listos para crear nuestro primer proyecto Angular y comenzar a desarrollar la aplicación que construiremos a lo largo de este curso.

Capítulo 009. Instalación de Node.js y Configuración del Entorno de Desarrollo

Introducción

Ha llegado el momento de preparar nuestro entorno de desarrollo para comenzar a crear aplicaciones con Angular. El primer paso consiste en instalar Node.js, una herramienta fundamental dentro del ecosistema JavaScript y un requisito indispensable para trabajar con Angular y sus herramientas de desarrollo.

En este capítulo instalaremos Node.js utilizando un administrador de versiones, lo que nos permitirá mantener distintas versiones de Node en nuestro equipo y cambiar entre ellas cuando sea necesario.

---

¿Qué es Node.js?

Node.js es un entorno de ejecución de JavaScript que permite ejecutar código fuera de un navegador web.

Tradicionalmente, JavaScript se ejecutaba únicamente dentro de navegadores como:

• Google Chrome

• Mozilla Firefox

• Microsoft Edge

• Safari

Con Node.js es posible ejecutar aplicaciones y herramientas basadas en JavaScript directamente desde la línea de comandos, sin depender de un navegador.

Esto resulta especialmente importante porque muchas de las herramientas utilizadas en el desarrollo moderno, incluyendo Angular CLI, se ejecutan sobre Node.js.

---

¿Por qué necesitamos Node.js para Angular?

Angular utiliza diversas herramientas que dependen de Node.js para funcionar correctamente.

Entre las tareas que realizaremos mediante estas herramientas se encuentran:

• Crear proyectos Angular.

• Generar componentes y servicios.

• Ejecutar la aplicación localmente.

• Compilar el proyecto.

• Ejecutar pruebas automatizadas.

• Generar versiones listas para producción.

Sin Node.js no podríamos utilizar Angular CLI ni gran parte del ecosistema de desarrollo asociado a Angular.

---

La importancia de administrar versiones

El ecosistema JavaScript evoluciona rápidamente. Como consecuencia, algunas herramientas funcionan únicamente con versiones específicas de Node.js.

Por esta razón, es una buena práctica utilizar un administrador de versiones de Node (Node Version Manager o NVM).

Las ventajas principales son:

• Instalar múltiples versiones de Node.js.

• Cambiar fácilmente entre versiones.

• Mantener compatibilidad con distintos proyectos.

• Evitar conflictos entre herramientas.

De esta forma, cada proyecto puede utilizar la versión de Node recomendada sin afectar a otros desarrollos existentes en el equipo.

---

Instalación de NVM para Windows

Para este curso utilizaremos NVM for Windows, una implementación del administrador de versiones de Node para sistemas Windows.

Paso 1: Descargar NVM

Accede al repositorio oficial de NVM para Windows en GitHub:

https://github.com/coreybutler/nvm-windows

Dirígete a la sección Releases y descarga el instalador con extensión .exe.

Paso 2: Ejecutar el instalador

Una vez descargado:

1. Ejecuta el archivo instalador.

2. Acepta los términos de licencia.

3. Sigue el asistente de instalación.

4. Haz clic en Siguiente hasta completar el proceso.

5. Finaliza la instalación.

La instalación es bastante sencilla y no requiere configuraciones especiales.

---

Abrir la consola de comandos

Una vez instalado NVM, debemos abrir una ventana de comandos.

Método rápido

Presiona:

Windows + R

Escribe:

cmd

Y presiona:

Enter

Se abrirá una consola desde la cual podremos ejecutar comandos de NVM y Node.js.

---

Verificar la instalación de NVM

Para comprobar que NVM se instaló correctamente, ejecuta el siguiente comando:

nvm

Si la instalación fue exitosa, aparecerá una lista con los comandos disponibles de NVM.

---

Instalar la versión de Node utilizada en el curso

Para garantizar la compatibilidad con todos los ejemplos y ejercicios, utilizaremos la versión:

20.16.0

Para instalarla, ejecuta:

nvm install 20.16.0

Durante este proceso, NVM descargará e instalará la versión indicada de Node.js.

Importante: Se recomienda utilizar las mismas versiones de las herramientas empleadas en el curso para evitar diferencias de comportamiento o problemas de compatibilidad.

---

Activar la versión instalada

Instalar una versión no significa que automáticamente comenzará a utilizarse.

Después de instalar Node.js, debemos activarlo mediante el siguiente comando:

nvm use 20.16.0

Si todo funciona correctamente, NVM mostrará un mensaje indicando que la versión seleccionada ya está en uso.

---

Verificar la versión activa de Node.js

Finalmente, podemos confirmar que estamos utilizando la versión correcta ejecutando:

node --version

La salida debería ser similar a:

v20.16.0

Esto confirma que Node.js se encuentra correctamente instalado y configurado.

---

Resumen

En este capítulo instalamos y configuramos Node.js, uno de los requisitos fundamentales para desarrollar aplicaciones Angular. Para administrar las distintas versiones de Node utilizamos NVM for Windows, lo que nos permitirá mantener un entorno de desarrollo flexible y compatible con diferentes proyectos.

Los comandos utilizados fueron:

nvm install 20.16.0

nvm use 20.16.0

node --version

Con Node.js instalado correctamente, ya estamos listos para continuar con la instalación de Angular CLI y crear nuestro primer proyecto Angular.

Capítulo 008. ¿Qué es TypeScript?

 Introducción

Durante el desarrollo de aplicaciones Angular utilizaremos TypeScript como lenguaje de programación principal. De hecho, TypeScript es el lenguaje recomendado y utilizado por defecto en los proyectos Angular modernos.

Antes de comenzar a trabajar con Angular, es importante comprender qué es TypeScript, cuáles son sus ventajas y por qué se ha convertido en una herramienta fundamental para el desarrollo de aplicaciones de gran escala.

---

El problema de JavaScript

JavaScript es un lenguaje de programación flexible y fácil de aprender. Sin embargo, una de sus características es que utiliza tipado dinámico, lo que significa que no es necesario declarar el tipo de dato de una variable.

Por ejemplo:

let nombre = "Felipe";

En este caso, no se especifica explícitamente que nombre es una cadena de texto (string). JavaScript simplemente lo deduce a partir del valor asignado.

Aunque esta flexibilidad puede resultar conveniente, también puede provocar errores difíciles de detectar en aplicaciones grandes.

Consideremos el siguiente ejemplo:

let nombre = "Felipe";

let numero = 2;

function sumar(a, b) {

return a + b;

}

let suma = sumar(nombre, numero);

console.log(suma);

La función sumar parece diseñada para sumar números. Sin embargo, JavaScript permite enviar cualquier tipo de dato como argumento, incluyendo cadenas de texto.

Como consecuencia, pueden producirse comportamientos inesperados que generen errores difíciles de localizar, especialmente en aplicaciones con miles de líneas de código.

---

¿Qué es TypeScript?

TypeScript es un lenguaje de programación desarrollado por Microsoft que se basa en JavaScript y añade características adicionales para mejorar la productividad y la calidad del código.

Se describe como un superconjunto tipado de JavaScript (typed superset of JavaScript), lo que significa que:

Todo código JavaScript válido también es código TypeScript válido.

Esto facilita enormemente la adopción de TypeScript, ya que no es necesario reaprender completamente un nuevo lenguaje.

---

Tipado estático

La característica más importante de TypeScript es su sistema de tipado estático.

Gracias a este sistema podemos indicar explícitamente qué tipo de dato esperamos utilizar en:

• Variables.

• Parámetros de funciones.

• Valores de retorno.

• Propiedades de clases.

• Objetos e interfaces.

Por ejemplo:

let nombre: string = "Felipe";

let numero: number = 2;

function sumar(a: number, b: number): number {

return a + b;

}

En este caso:

• nombre debe contener un valor de tipo string.

• numero debe contener un valor de tipo number.

• Los parámetros a y b deben ser números.

• La función debe devolver un número.

---

Detección temprana de errores

Supongamos que intentamos utilizar la función anterior de manera incorrecta:

let nombre: string = "Felipe";

let numero: number = 2;

let suma: number = sumar(nombre, numero);

TypeScript detectará inmediatamente un error similar al siguiente:

Argument of type 'string' is not assignable to parameter of type 'number'.

Esto sucede porque se está enviando una cadena de texto donde se esperaba un número.

La ventaja es que el error se detecta durante el desarrollo, antes de ejecutar la aplicación.

En proyectos pequeños este beneficio puede parecer menor, pero en aplicaciones empresariales grandes permite ahorrar una enorme cantidad de tiempo al identificar errores tempranamente.

---

Inferencia de tipos

Aunque TypeScript permite declarar tipos explícitamente, muchas veces no es necesario hacerlo.

Por ejemplo:

let nombre = "Felipe";

TypeScript es capaz de inferir automáticamente que la variable nombre es de tipo string.

Este proceso se conoce como inferencia de tipos (Type Inference).

Gracias a ello, es posible escribir código más limpio sin perder las ventajas del tipado estático.

---

Compatibilidad con JavaScript

Una de las mayores ventajas de TypeScript es su compatibilidad total con JavaScript.

Si una aplicación está desarrollada completamente en JavaScript, puede comenzar a utilizar TypeScript sin necesidad de realizar grandes modificaciones iniciales.

Por ejemplo:

let mensaje = "Hola Mundo";

function saludar(nombre) {

return "Hola " + nombre;

}

El código anterior es válido tanto en JavaScript como en TypeScript.

Posteriormente, el desarrollador puede ir agregando tipos gradualmente para obtener mayores beneficios.

Esta compatibilidad facilita la migración de proyectos existentes.

---

Características modernas del lenguaje

Además del sistema de tipos, TypeScript incorpora características modernas que ayudan a los desarrolladores a escribir código más robusto y expresivo.

Entre ellas se encuentran:

• Interfaces.

• Enumeraciones (Enums).

• Genéricos (Generics).

• Decoradores.

• Tipos avanzados.

• Mejor soporte para programación orientada a objetos.

Muchas de estas características permiten diseñar aplicaciones más organizadas y fáciles de mantener.

---

Compilación de TypeScript

Es importante entender que los navegadores no ejecutan código TypeScript directamente.

Antes de ejecutar una aplicación, el código TypeScript debe convertirse a JavaScript mediante un proceso conocido como compilación o transpilación.

El flujo de trabajo es el siguiente:

TypeScript

↓

Compilación

↓

JavaScript

↓

Navegador

Durante esta compilación es cuando TypeScript analiza el código y detecta posibles errores de tipos.

Gracias a este mecanismo, los desarrolladores pueden aprovechar las ventajas de TypeScript mientras mantienen total compatibilidad con los navegadores modernos.

---

¿Por qué Angular utiliza TypeScript?

Angular adopta TypeScript como lenguaje principal porque ofrece herramientas que facilitan el desarrollo de aplicaciones complejas.

Algunos beneficios son:

• Detección temprana de errores.

• Mejor autocompletado en el editor.

• Navegación más sencilla por el código.

• Refactorización más segura.

• Mayor productividad.

• Mejor mantenibilidad en proyectos grandes.

Estas ventajas son especialmente importantes en aplicaciones empresariales donde participan varios desarrolladores y el código debe mantenerse durante años.

---

TypeScript en este curso

A lo largo de este curso trabajaremos con TypeScript de forma natural como parte del desarrollo de aplicaciones Angular.

No es necesario tener experiencia previa con el lenguaje, ya que utilizaremos principalmente sus características fundamentales, incluyendo:

• Variables tipadas.

• Funciones.

• Clases.

• Interfaces.

• Decoradores básicos.

Los conceptos avanzados se irán introduciendo progresivamente conforme sean necesarios para el desarrollo de la aplicación.

---

Resumen

TypeScript es un lenguaje desarrollado por Microsoft que extiende JavaScript mediante un sistema de tipos estáticos y otras características orientadas a mejorar la productividad y la calidad del código. Gracias a la detección temprana de errores, la compatibilidad con JavaScript y sus potentes herramientas de desarrollo, TypeScript se ha convertido en el estándar para trabajar con Angular.

Durante el resto del curso utilizaremos TypeScript como lenguaje principal para construir el frontend de nuestra aplicación, aprovechando sus ventajas para desarrollar código más seguro, mantenible y fácil de entender.