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 rápidamente nuevos proyectos con una estructura predefinida;

• Generar componentes, servicios y otros elementos del proyecto;

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

• Compilar 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, seleccione una ubicación conveniente en su computadora donde desee almacenar sus proyectos Angular.

Si no dispone de una carpeta dedicada para proyectos, cree una 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 proyecto Angular;

• angular-app - el nombre del proyecto (puede utilizar cualquier nombre que prefiera).

Después de ejecutar el comando, Angular CLI le mostrará algunas preguntas de configuración:

• ¿Desea agregar enrutamiento de Angular? - este tema se abordará más adelante, por ahora seleccione Yes;

• ¿Qué formato de hoja de estilos desea utilizar? - esto determina el tipo de hojas de estilo para su proyecto. Se recomienda elegir CSS, pero puede seleccionar la opción que prefiera.

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

Cuando finalice la configuración, 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, se analizará 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 la aplicación.