Tutorial de Angular: guía básica paso a paso

1. Justificación del framework

¿Para qué sirve Angular?

Angular es un framework de desarrollo web mantenido por Google que sirve para crear aplicaciones web de una sola página (SPA) robustas, escalables y modulares.

¿Qué aplicaciones tiene?

Aplicaciones empresariales de gran tamaño.
Paneles de administración y cuadros de mando.
Aplicaciones que consumen APIs REST.
Portales con mucha interacción con el cliente.

¿Sobre qué lenguajes se apoya?

TypeScript como lenguaje principal.
JavaScript, HTML y CSS para la interfaz del usuario.
RxJS para la programación reactiva.

¿Qué requisitos previos necesita?

Conocimientos básicos de JavaScript y programación web.
Node.js instalado en el sistema.
Manejo básico de terminal y de un editor como Visual Studio Code.

2. Instalación de Angular

¿Se precisa instalación?

Sí. Para trabajar con Angular es necesario instalar Node.js y la herramienta de línea de comandos Angular CLI.

Versiones necesarias de Node y npm

Para comprobar la versión instalada:

node -v
npm -v

Instalación de Angular CLI

npm install -g @angular/cli

Para verificar que se ha instalado correctamente:

ng version

Creación de un nuevo proyecto

ng new mi-proyecto-angular

Esto crea la carpeta mi-proyecto-angular con la estructura inicial del proyecto.

Rutas y directorios importantes

src/app/: componentes y módulos principales.
src/assets/: recursos estáticos (imágenes, iconos, etc.).
angular.json: configuración del proyecto.
package.json: dependencias y scripts de ejecución.

Variables de entorno

Angular permite definir distintos entornos en la carpeta src/environments/. En un tutorial básico no es necesario modificarlas, pero forman parte de la configuración del proyecto.

¿Necesita base de datos?

Angular se ejecuta en el navegador y no incluye una base de datos propia. Para almacenar datos se conecta a servicios y APIs externas que sí pueden usar bases de datos.

3. Primeros pasos: Hola Mundo

Para arrancar la aplicación en modo desarrollo:

cd mi-proyecto-angular
ng serve

Por defecto, la aplicación se sirve en http://localhost:4200.

Para mostrar un mensaje de “Hola Mundo”, se edita el archivo:

src/app/app.component.html

Ejemplo de contenido:

<h1>Hola mundo desde Angular</h1>
<p>Esta es mi primera aplicación construida con este framework.</p>

Al guardar los cambios y recargar el navegador, aparecerá el mensaje en la pantalla principal.

4. Utilización del framework

4.1. ¿Cómo empezar a crear una aplicación base?

En Angular, la aplicación se construye a partir de componentes. Para crear un componente nuevo se utiliza el Angular CLI:

ng generate component perfil

Esto genera varios archivos dentro de src/app/perfil/, entre ellos:

perfil.component.ts: lógica del componente.
perfil.component.html: plantilla HTML.
perfil.component.css: estilos asociados.

4.2. ¿Cómo visualizar los resultados de la ejecución?

Para ver el componente desde el navegador, se usa el enrutador de Angular. En el archivo src/app/app-routing.module.ts se añade una ruta:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'perfil', component: PerfilComponent }
];

En la plantilla principal, por ejemplo en app.component.html, se puede definir un menú de navegación sencillo:

<nav>
  <a routerLink="/">Inicio</a>
  <a routerLink="/perfil">Perfil</a>
</nav>

<router-outlet></router-outlet>

Manteniendo corriendo ng serve, al entrar en http://localhost:4200/perfil se mostrará el contenido del componente PerfilComponent.

5. Funcionamiento interno del framework

5.1. ¿Actúa sobre páginas, ficheros, secciones…?

Angular organiza la aplicación en módulos y componentes. Cada componente combina:

Un fichero TypeScript con la lógica (.ts).
Una plantilla HTML (.html).
Un fichero de estilos (.css o .scss).

El enrutador de Angular asocia rutas del navegador a componentes concretos, lo que permite navegar entre “páginas” sin recargar la web completa.

5.2. ¿Cómo se editan o modifican los ficheros?

La edición se realiza desde el editor de código. Para cambiar la apariencia, se modifica la plantilla HTML y los estilos; para cambiar la lógica, se edita el archivo TypeScript del componente.

5.3. ¿Cómo se referencian los ficheros desde otras partes?

Los componentes se referencian:

Mediante su selector, por ejemplo <app-perfil></app-perfil>, en la plantilla de otro componente.
A través del enrutador, declarando rutas en app-routing.module.ts que apunten al componente deseado.

6. Conclusiones del tutorial

En este tutorial se ha presentado Angular como un framework completo para el desarrollo de aplicaciones web de una sola página. Se han descrito sus objetivos, sus requisitos, el proceso de instalación y la creación de un ejemplo básico de aplicación.

También se ha explicado cómo se organiza internamente en componentes, módulos y rutas, y cómo se visualizan los resultados en el navegador. Con esta base, el lector puede continuar explorando características más avanzadas como el consumo de APIs, la gestión de formularios o el trabajo con servicios y almacenamiento.