Creación de un proyecto de Angular desde cero
Introducción a Angular y su arquitectura (III)
Como hemos visto, Angular es un poderoso framework de desarrollo web que permite construir aplicaciones modernas y escalables. En este artículo, te guiaré paso a paso en la creación de un proyecto de Angular desde cero. Aprenderás cómo configurar el entorno de desarrollo, crear el proyecto y ejecutarlo en tu navegador.
Pre-requisitos
Antes de comenzar, asegúrate de tener instalado Node.js en tu ordenador. Node.js es una plataforma que permite ejecutar JavaScript fuera del navegador. Puedes descargarlo e instalarlo desde el sitio web oficial (https://nodejs.org/es).
También te recomiendo instalar Visual Studio Code (https://code.visualstudio.com/), es el IDE que utilizo normalmente y, por supuesto, es que el usaré a lo largo de este curso. Además, te recomiendo instalar la extensión “Angular Language Service”.
Instalación de Angular CLI
Angular CLI (Command Line Interface) es una herramienta de línea de comandos que facilita la creación y administración de proyectos de Angular. Abre tu terminal y ejecuta el siguiente comando para instalar la versión más reciente de Angular CLI de forma global:
npm install -g @angular/cliProtip: si quieres asegurarte que descargas la misma versión que utilizaremos a lo largo del curso, ejecuta el siguiente comando:
npm install -g @angular/cli@16.1.0Creación del Proyecto
Crea una nueva carpeta donde te interese guardar todos los archivos de nuestro proyecto, por ejemplo en mi caso: D:\Dev\Projects\angulardex.
Una vez creada esta carpeta, abre VS Code y en el menú superior pulsa en File > Open Folder y selecciona tu carpeta.
Protip: te recomiendo que crees un workspace en esta carpeta, para ello desde VS Code crea una nueva que se llame “.vscode”, ahora en el menú superior pulsa File > Add folder to Workspace… y selecciona la carpeta “.vscode”.
Definir un workspace nos permite crear una configuración específica para el proyecto, también podemos crear comandos o “snippets”, además de mejorar la estructura del proyecto.
Ahora desde la terminal de vscode (si no te sale pulsa F1 y escribe: “>Terminal: Create New Terminal”)
La manera tradicional de crear un nuevo proyecto en Angular es ejecutando el mando (comentaré otra manera más rápida de hacerlo):
ng new <nombre del proyecto>A continuación nos saldrán una serie de preguntas que nos permitirán personalizar el proyecto, por ejemplo si queremos implementar Routing o qué procesador de estilo vamos a utiliza. Esto nos generará una nueva carpeta que contendrá todo el código fuente y recursos de nuestro proyecto.
Protip: como nosotros ya hemos creado la carpeta “raíz” de nuestro proyecto, te recomiendo ejecutar el siguiente comando, que además de no crear esa carpeta extra nos ahorrará responder las preguntas anteriormente comentadas:
ng new --directory=. --routing=true --style=scss angulardexAl final debemos tener algo como esto:
Ejecución del Proyecto
Para compilar y servir tu aplicación en un servidor de desarrollo local, permitiéndote ver y probar los cambios en tiempo real a medida que trabajas en tu proyecto, ejecuta el siguiente comando:
npm run startPodrás ver tu aplicación en tu navegador en la dirección http://localhost:4200
En este artículo, has aprendido a crear un proyecto de Angular desde cero. Configuraste el entorno de desarrollo, instalaste Angular CLI, creaste un nuevo proyecto y ejecutaste la aplicación en tu navegador. Ahora estás listo para comenzar a construir tu aplicación Angular y explorar todo lo que este poderoso framework tiene para ofrecer.
Recuerda que la práctica y la exploración constante son clave para dominar Angular. ¡Sigue aprendiendo, experimentando y desarrollando tus habilidades para convertirte en un desarrollador Angular exitoso!
Espero que este artículo te haya proporcionado una guía clara y útil para crear tu primer proyecto de Angular. ¡Disfruta tu viaje en el desarrollo de aplicaciones web con Angular!