Ahora que todas las herramientas necesarias, incluyendo Node.js, VS Code y Angular CLI, están instaladas, es momento de crear tu primer proyecto y ver cómo Angular CLI simplifica el proceso de desarrollo.

¿Qué es Angular CLI?

Permite:

• Crear nuevos proyectos rápidamente con una estructura predefinida;

• Generar componentes, servicios y otros elementos del proyecto;

• Iniciar un servidor de desarrollo para pruebas y depuración;

• Construir la aplicación para su despliegue en producción.

Con Angular CLI, no es necesario configurar manualmente los archivos y dependencias; todo se configura automáticamente.

Configuración del espacio de trabajo

Antes de crear un nuevo proyecto, selecciona una ubicación conveniente en tu computadora donde desees almacenar tus proyectos Angular.

Si no tienes una carpeta dedicada para proyectos, créala utilizando el siguiente comando:

Este comando crea una nueva carpeta llamada projects en la ubicación especificada.

A continuación, navega a la carpeta recién creada ejecutando:

Este comando abre la carpeta projects, permitiéndote trabajar dentro de ella.

Creación de un proyecto Angular con CLI

Para crear un nuevo proyecto Angular, ejecuta el siguiente comando dentro de tu carpeta de proyecto:

• ng new - el comando para crear un nuevo proyecto Angular;

• angular-app - el nombre del proyecto (puedes usar cualquier nombre que prefieras).

Después de ejecutar el comando, el Angular CLI te solicitará responder algunas preguntas de configuración:

• ¿Deseas agregar enrutamiento de Angular? - esto se abordará más adelante, por ahora selecciona Yes;

• ¿Qué formato de hoja de estilos deseas utilizar? - esto determina el tipo de hojas de estilos para tu proyecto. Se recomienda elegir CSS, pero puedes seleccionar la opción que prefieras.

Una vez que confirmes estas opciones, el Angular CLI comenzará a instalar las dependencias. Este proceso puede tomar algunos minutos mientras se descargan e instalan todos los paquetes necesarios.

Cuando la configuración finalice, aparecerá un mensaje de éxito indicando que el proyecto se ha creado correctamente.

Ahora, puedes abrir el proyecto en VS Code, que instalamos anteriormente.

En el próximo capítulo, analizarás en detalle la estructura de carpetas y archivos generada por Angular CLI para comprender cómo se organiza un proyecto de Angular y dónde se encuentran las partes clave de tu aplicación.