En esta página:
¿Quieres aprender a crear tu primer proyecto en Angular de forma sencilla y clara?
En esta guía paso a paso, te mostraré cómo crear un proyecto en Angular desde cero, incluso si nunca antes has usado este framework.
Además, entenderás por qué Angular es tan popular y cómo sacarle el máximo provecho desde el primer día.
¿Qué es Angular y para qué sirve?
Angular es un framework de desarrollo web creado por Google.
Está diseñado para construir aplicaciones web modernas, rápidas y escalables.
A diferencia de otras librerías como React o Vue, Angular ofrece una solución completa: enrutamiento, manejo de formularios, consumo de APIs, animaciones, pruebas y mucho más.
¿Por qué aprender Angular?
Vale la pena conocer Angular porque:
- Es respaldado por Google, lo que garantiza actualizaciones y soporte a largo plazo.
- Se usa en empresas grandes para aplicaciones robustas.
- Tiene una estructura clara y escalable, ideal para proyectos profesionales.
- Ofrece herramientas integradas que simplifican el desarrollo.
Requisitos para empezar con Angular
Antes de crear tu proyecto, asegúrate de tener las siguientes herramientas instaladas:
1. Instalar Node.js y npm
Angular necesita Node.js para funcionar.
Puedes descargarlo desde nodejs.org.
Una vez instalado, verifica que tienes todo correctamente:
|
1 2 3 4 |
node -v npm -v |
2. Instalar Angular CLI
La Angular CLI es una herramienta que te permite crear y administrar proyectos Angular fácilmente desde la terminal:
|
1 2 3 |
npm install -g @angular/cli |
Verifica que se haya instalado bien:
|
1 2 3 4 |
# Verifica la versión instalada de Angular ng version |
Crear tu primer proyecto en Angular
Una vez tengas instalado todo, puedes crear tu aplicación con un solo comando.
1. Crear el proyecto
Dependiendo de la versión de Angular que estés usando, la CLI te hará algunas preguntas:
- ¿Deseas usar Angular routing (enrutamiento)? Escribe Yes si vas a tener varias páginas.
- ¿Qué estilo de CSS deseas? Puedes elegir CSS, SCSS, Sass, etc. Elige CSS si estás empezando.
En sus últimas versiones de Angular, no suele hacer estas preguntas, si usas una de estas, continúa con el proceso:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$ ng new mi-primer-proyecto CREATE mi-primer-proyecto/angular.json (2734 bytes) CREATE mi-primer-proyecto/package.json (1048 bytes) CREATE mi-primer-proyecto/README.md (1538 bytes) CREATE mi-primer-proyecto/tsconfig.json (942 bytes) CREATE mi-primer-proyecto/.editorconfig (331 bytes) CREATE mi-primer-proyecto/.gitignore (629 bytes) CREATE mi-primer-proyecto/tsconfig.app.json (439 bytes) CREATE mi-primer-proyecto/tsconfig.spec.json (449 bytes) CREATE mi-primer-proyecto/.vscode/extensions.json (134 bytes) CREATE mi-primer-proyecto/.vscode/launch.json (490 bytes) CREATE mi-primer-proyecto/.vscode/tasks.json (980 bytes) CREATE mi-primer-proyecto/src/main.ts (256 bytes) CREATE mi-primer-proyecto/src/index.html (315 bytes) CREATE mi-primer-proyecto/src/styles.css (81 bytes) CREATE mi-primer-proyecto/src/app/app.component.html (20239 bytes) CREATE mi-primer-proyecto/src/app/app.component.spec.ts (981 bytes) CREATE mi-primer-proyecto/src/app/app.component.ts (306 bytes) CREATE mi-primer-proyecto/src/app/app.component.css (0 bytes) CREATE mi-primer-proyecto/src/app/app.config.ts (318 bytes) CREATE mi-primer-proyecto/src/app/app.routes.ts (80 bytes) CREATE mi-primer-proyecto/public/favicon.ico (15086 bytes) - Installing packages (npm)... √ Packages installed successfully. Successfully initialized git. |
Tras ejecutar el comando anterior, se nos ha creado un directorio con el nombre mi-primer-proyecto y en él hay un conjunto de directorios y archivos indispensables para que el proyecto funcione correctamente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/mi-primer-proyecto ├── 📁.vscode/ // Este directorio solo te aparece si usas Visual Studio Code ├── 📁node_modules/ ├── 📁public/ ├── 📁src/ ├── .editorconfig ├── .gitignore ├── angular.json ├── package.json ├── package-lock.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json |
2. Entrar al proyecto
|
1 2 3 |
cd mi-primer-proyecto |
3. Iniciar el servidor
Ingresamos al directorio del proyecto y luego iniciamos el servidor de Angular Framework:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
# Ingresamos al directorio del proyecto cd mi-primer-proyecto # Iniciamos el servidor de desarrollo de Angular Framework ng serve Component HMR has been enabled. If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option. Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues > Building... √ Building... Initial chunk files | Names | Raw size polyfills.js | polyfills | 90.20 kB | main.js | main | 47.91 kB | styles.css | styles | 95 bytes | | Initial total | 138.21 kB Application bundle generation complete. [1.948 seconds] Watch mode enabled. Watching for file changes... NOTE: Raw file sizes do not reflect development server per-request transformations. ➜ Local: http://localhost:4200/ |
Vamos al navegador y abrimos la ruta http://localhost:4200/ y podemos ver que nuestro proyecto se ha creado correctamente:
Estructura básica de un proyecto Angular
Cuando abras tu proyecto en un editor como Visual Studio Code, verás algo así:
| Carpeta / Archivo | Descripción |
|---|---|
| src/app/ | Aquí van tus componentes, servicios y módulos |
| app.component.ts | Componente principal de la aplicación |
| app.module.ts | Módulo raíz de la app (Aparece cuando creas un proyecto con “standalone components” o componentes independientes) |
| angular.json | Configuración general del proyecto |
| package.json | Lista de dependencias y scripts |
Buenas prácticas para proyectos Angular
Considera realizar las siguientes buenas prácticas al crear tu proyecto en Angular:
- Organiza tu código en módulos separados por funcionalidad.
- Usa servicios para separar la lógica del componente.
- Evita lógica compleja en el HTML, mantenla en el .ts.
- Utiliza Reactive Forms para formularios avanzados.
- Siempre prueba tu app con ng build –prod antes de desplegar.
Así es cómo puedes crear un proyecto en Angular desde cero
Conclusión
Aprender Angular desde cero puede parecer mucho al principio, pero una vez que entiendes su estructura basada en componentes, módulos y servicios, se convierte en una herramienta increíblemente poderosa.
Con Angular puedes construir desde simples portafolios hasta grandes aplicaciones empresariales.
Lo importante es comenzar con un buen proyecto base, practicar y no rendirse.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.