En esta sección, aprenderás a configurar tu entorno de desarrollo para trabajar con Angular. Este proceso incluye la instalación de Node.js, Angular CLI y la creación de un proyecto Angular básico.

Antes de comenzar, asegúrate de tener lo siguiente:

• Un editor de código. Recomendamos Visual Studio Code.
• Conexión a Internet para descargar las herramientas necesarias.

Angular requiere Node.js y npm (Node Package Manager). Node.js es un entorno de ejecución para JavaScript, y npm es el gestor de paquetes que viene con Node.js.

1. Descargar Node.js:

   • Ve a la página oficial de Node.js.
   • Descarga la versión LTS (Long Term Support) recomendada para la mayoría de los usuarios.

2. Instalar Node.js:

   • Ejecuta el instalador descargado y sigue las instrucciones en pantalla.
   • Una vez completada la instalación, abre una terminal o línea de comandos y verifica la instalación ejecutando los siguientes comandos:

     node -v
     npm -v
     

   • Deberías ver las versiones de Node.js y npm instaladas.

Angular CLI (Command Line Interface) es una herramienta que facilita la creación y gestión de proyectos Angular.

1. Instalar Angular CLI:
   • En la terminal, ejecuta el siguiente comando para instalar Angular CLI globalmente:

     npm install -g @angular/cli
     

   • Verifica la instalación ejecutando:

     ng version
     

   • Deberías ver la versión de Angular CLI instalada.

Ahora que tienes Angular CLI instalado, puedes crear un nuevo proyecto Angular.

1. Crear un nuevo proyecto:

   • En la terminal, navega al directorio donde deseas crear tu proyecto y ejecuta:

     ng new my-angular-app
     

   • Angular CLI te pedirá que elijas algunas configuraciones, como el uso de Angular routing y el estilo de hoja de estilos (CSS, SCSS, etc.). Selecciona las opciones según tus preferencias.

2. Navegar al directorio del proyecto:

   • Una vez creado el proyecto, navega al directorio del proyecto:

     cd my-angular-app
     

3. Iniciar el servidor de desarrollo:

   • Para iniciar el servidor de desarrollo y ver tu aplicación en el navegador, ejecuta:

     ng serve
     

   • Abre tu navegador y ve a http://localhost:4200/. Deberías ver la página de bienvenida de Angular.

Para una mejor experiencia de desarrollo, configura tu editor de código con las extensiones necesarias.

1. Instalar Visual Studio Code:

   • Si aún no lo has hecho, descarga e instala Visual Studio Code.

2. Instalar extensiones recomendadas:

   • Abre Visual Studio Code y ve a la sección de extensiones (icono de cuadrado en la barra lateral izquierda).
   • Busca e instala las siguientes extensiones:
     • Angular Language Service: Proporciona autocompletado y sugerencias para Angular.
     • TSLint: Ayuda a mantener la calidad del código TypeScript.
     • Prettier - Code formatter: Formatea tu código automáticamente.

En esta sección, has aprendido a configurar tu entorno de desarrollo para trabajar con Angular. Has instalado Node.js, npm y Angular CLI, y has creado y ejecutado tu primer proyecto Angular. Además, has configurado Visual Studio Code con extensiones útiles para mejorar tu experiencia de desarrollo.

En la siguiente sección, crearás tu primera aplicación Angular y explorarás su estructura básica. ¡Vamos allá!