🅰️ Angular para Principiantes

Guía completa: instalación, anatomía, comandos, y ejemplos prácticos — para devs que vienen de HTML, CSS y JavaScript

📦 Instalación Requisitos previos

Antes de empezar, necesitás tener instalado Node.js (versión 18 o superior) y npm (viene con Node). Luego seguí estos pasos:

1. Instalar Angular CLI

npm install -g @angular/cli

Instala el comando ng globalmente.

2. Crear un proyecto

ng new mi-app

Respondé las preguntas (CSS, SSR, etc.). Elegí CSS para empezar.

3. Entrar al proyecto

cd mi-app

4. Levantar el servidor

ng serve

Abrí http://localhost:4200 en tu navegador.

🧬 Anatomía de un Componente Lo más importante

Un componente en Angular tiene 4 archivos que trabajan juntos. Acá ves cómo se ve cada uno:

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titulo = 'Hola Angular';

  clickear() {
    alert('¡Click!');
  }
}

// app.component.html
<h1>{{ titulo }}</h1>
<button (click)="clickear()">Click</button>

📌 selector El nombre de la etiqueta HTML que usás en tus plantillas.
Ej: <app-root>

📌 templateUrl Ruta al archivo HTML del componente.
Ahí va la estructura visual.

📌 styleUrls Ruta(s) al archivo CSS del componente.
Los estilos son locales (no afectan a otros).

📌 {{ variable }} Interpolación: mostrás el valor de una variable en el HTML.

📌 (click)="fn()" Event binding: ejecutás una función al hacer click.

📌 export class La clase TypeScript que contiene la lógica (datos, funciones, etc.).

⌨️ Comandos Angular CLI Generación de archivos

Todos estos comandos se ejecutan desde la raíz del proyecto. El formato general es: ng generate <tipo> <nombre>

Comando	Alias	Crea	Ejemplo
ng generate component	ng g c	Componente	`ng g c pages/inicio`
ng generate service	ng g s	Servicio	`ng g s services/auth`
ng generate directive	ng g d	Directiva	`ng g d directivas/resaltar`
ng generate pipe	ng g p	Pipe (filtro)	`ng g p pipes/uppercase`
ng generate class	ng g cl	Clase	`ng g cl models/Usuario`
ng generate interface	ng g i	Interfaz	`ng g i interfaces/Producto`
ng generate enum	ng g e	Enumerado	`ng g e enums/Rol`
ng generate module	ng g m	Módulo	`ng g m modules/admin --routing`
ng generate guard	ng g g	Guarda de rutas	`ng g g guards/auth`
ng generate interceptor	ng g interceptor	Interceptor HTTP	`ng g interceptor interceptors/auth`

💡 Tip: Los comandos aceptan rutas.
Ej: ng g c pages/dashboard/graficos crea el componente dentro de src/app/pages/dashboard/

🛠️ Otros comandos útiles Servir, construir, testear

🚀 `ng serve`

Levanta un servidor de desarrollo en localhost:4200 con recarga automática.

ng serve -o

-o abre el navegador automáticamente.

📦 `ng build`

Compila la aplicación en la carpeta dist/ lista para producción.

ng build --prod

--prod optimiza el código para producción.

🧪 `ng test`

Ejecuta las pruebas unitarias (Karma + Jasmine).

ng test

🧹 `ng lint`

Analiza el código en busca de errores y malas prácticas.

ng lint

📝 `ng generate` (sin argumentos)

Te muestra una lista interactiva de todo lo que podés generar.

ng generate

❓ `ng help`

Muestra la ayuda de todos los comandos disponibles.

ng help

🎮 Ejemplo práctico: Componente funcional HTML + CSS + JS

Este es un componente Angular funcionando tal cual lo verías en una app real. Hacé click en el botón para ver la interacción.

¡Bienvenido a Angular!

Esto es un componente con lógica TypeScript.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ titulo }}</h1>
    <button (click)="saludar()">Saludar</button>
    <p>{{ mensaje }}</p>
  `,
  styles: [`
    h1 { color: #dd0031; }
    button { background: #dd0031; color: white; border: none; padding: 10px 20px; border-radius: 8px; }
  `]
})
export class AppComponent {
  titulo = '¡Bienvenido a Angular!';
  mensaje = '';

  saludar() {
    this.mensaje = '¡Hola desde Angular!';
    alert('¡Click!');
  }
}

🔄 Flujo de trabajo típico Día a día

1️⃣ Crear componente

ng g c pages/inicio

Se generan 4 archivos: .ts, .html, .css, .spec.ts

2️⃣ Escribir lógica

En .ts definís variables, funciones, servicios, etc. Usás TypeScript (tipado, clases, decoradores).

3️⃣ Maquetar HTML

En .html usás binding: {{ variable }}, (click)="fn()", [prop]="valor"

4️⃣ Dar estilo

En .css escribís CSS normal (o SCSS, o el que elijas). Los estilos son locales por defecto.

5️⃣ Probar en el navegador