Angular: Introducción y entorno

Angular 18 es la última versión del popular framework de desarrollo frontend mantenido por Google. En esta lección, nos centraremos en la introducción y el entorno necesario para empezar a trabajar con Angular 18. Este módulo es fundamental para asegurar una configuración correcta y eficiente del entorno de desarrollo.

Requisitos previos

Antes de comenzar, asegúrate de tener instalados los siguientes componentes en tu sistema:

• Node.js (versión 16.0 o superior)
• npm (Node Package Manager, versión 7.0 o superior)
• Angular CLI (Command Line Interface)

Puedes verificar las versiones instaladas utilizando los siguientes comandos:

node -v
npm -v
ng version

Instalación de Angular CLI

La Angular CLI es una herramienta de línea de comandos que simplifica el desarrollo con Angular. Para instalarla, ejecuta el siguiente comando:

npm install -g @angular/cli

Esto instalará la CLI globalmente en tu sistema. Puedes verificar la instalación ejecutando:

ng version

Creación de un nuevo proyecto

Para crear un nuevo proyecto en Angular 18, utiliza el siguiente comando:

ng new mi-proyecto-angular

Este comando iniciará un asistente interactivo que te permitirá configurar las opciones del proyecto. Responde a las preguntas según tus necesidades. Por ejemplo, puedes optar por incluir o no Angular Routing y seleccionar el gestor de estilos que prefieras (CSS, SCSS, etc.).

Estructura del proyecto

Una vez creado el proyecto, la estructura de directorios es la siguiente:

mi-proyecto-angular/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── angular.json
├── package.json
├── tsconfig.json
└── tslint.json

Cada carpeta y archivo tiene un propósito específico. Por ejemplo:

• src/app: Contiene los componentes, servicios y módulos de la aplicación.
• src/assets: Archivos estáticos como imágenes y fuentes.
• angular.json: Configuración del proyecto Angular.
• package.json: Dependencias del proyecto.

Servidor de desarrollo

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

ng serve

Por defecto, la aplicación estará disponible en http://localhost:4200/. Puedes abrir esta URL en tu navegador para ver la aplicación en funcionamiento.

Configuración del entorno

Angular permite definir múltiples entornos (desarrollo, producción, etc.). Estos entornos se configuran en la carpeta src/environments. Cada entorno tiene su propio archivo de configuración (environment.ts, environment.prod.ts, etc.).

Para construir la aplicación para un entorno específico, utiliza:

ng build --configuration=production

Este comando generará la versión optimizada de tu aplicación para el entorno de producción.