Cómo crear un proyecto en Angular

Angular es un framework de desarrollo web basado en TypeScript, creado por Google, que permite construir aplicaciones web dinámicas y de gran escala. Angular ofrece una estructura sólida para manejar la creación de componentes, la gestión de datos, el enrutamiento y mucho más, lo que lo convierte en una opción popular para el desarrollo de aplicaciones web modernas.

Requisitos previos

Antes de crear un proyecto en Angular, debes asegurarte de tener lo siguiente instalado en tu sistema:

1. Node.js: Angular se ejecuta sobre Node.js, así que necesitas tenerlo instalado.

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

Verifica si tienes Node.js instalado

Para verificar si tienes Node.js instalado, abre tu terminal y ejecuta el siguiente comando:

Si no está instalado, puedes descargarlo desde Node.js Official.

Instala Angular CLI

Si ya tienes Node.js, el siguiente paso es instalar la Angular CLI. Para ello, ejecuta el siguiente comando en tu terminal:

Este comando instalará la herramienta de Angular CLI globalmente en tu sistema, permitiéndote crear y gestionar proyectos Angular desde cualquier directorio.

Crear un nuevo proyecto en Angular

1. Generar el proyecto

Con Angular CLI instalado, puedes crear un nuevo proyecto Angular ejecutando el siguiente comando:

Este comando genera la estructura inicial del proyecto en una carpeta con el nombre que hayas especificado. Durante el proceso, Angular CLI te pedirá algunas configuraciones, como si deseas agregar enrutamiento o el tipo de hojas de estilo (CSS, SCSS, etc.) que prefieres utilizar.

2. Navegar al directorio del proyecto

Después de crear el proyecto, navega al directorio recién creado:

3. Iniciar el servidor de desarrollo

Para visualizar tu proyecto en el navegador, ejecuta el servidor de desarrollo con el siguiente comando:

Una vez que el servidor esté ejecutándose, puedes abrir tu navegador y navegar a http://localhost:4200. Allí verás la aplicación Angular por defecto corriendo.

Estructura básica de un proyecto Angular

Cuando creas un proyecto Angular con Angular CLI, este incluye una estructura predeterminada que facilita el desarrollo. Los directorios y archivos más importantes son:

Crear un componente en Angular

Los componentes son la base de cualquier aplicación Angular. Para crear un nuevo componente, puedes utilizar el siguiente comando de Angular CLI:

Por ejemplo:

Este comando creará cuatro archivos en una carpeta con el nombre del componente:

Puedes luego incluir este componente en tu aplicación añadiéndolo en el archivo app.module.ts y usándolo dentro de las plantillas HTML de otros componentes.

Ejecutar y construir la aplicación

1. Servidor de desarrollo

Para desarrollar y ver los cambios en tiempo real, usa ng serve. Esto también permite hot-reloading.

2. Construir la aplicación para producción

Para preparar tu aplicación para producción, puedes construirla con el siguiente comando:

Esto generará los archivos optimizados en la carpeta dist/, que podrás desplegar en un servidor.

Referencia

Para más detalles y funcionalidades avanzadas, puedes consultar la documentación oficial de Angular: Angular Docs.