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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs