Angular es un framework de desarrollo web creado por Google, basado en TypeScript para construir aplicaciones SPA (Single Page Applications).

Historia:

• 2010: AngularJS - Primer versión en JavaScript
• 2016: Angular 2 - Reescritura completa en TypeScript
• 2017+: Angular 4, 5, 6... hasta Angular 17+

Diferencias Angular vs AngularJS:

• Angular usa TypeScript (tipado estático)
• Arquitectura basada en componentes
• Mejor rendimiento con Change Detection
• CLI oficial para generación de código

Requisitos Previos:

# Instalar Node.js desde nodejs.org
# Verificar instalación
node --version
npm --version

Instalar Angular CLI:

npm install -g @angular/cli

# Verificar instalación
ng version

Crear Proyecto:

ng new mi-app
cd mi-app
ng serve

Estructura del Proyecto:

mi-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   └── index.html
├── angular.json
└── package.json

Crear Componente:

ng generate component nombre
# O abreviado:
ng g c nombre

Componente básico:

import { Component } from '@angular/core';

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

Template:

<h1>{{ titulo }}</h1>
<button (click)="saludar()">Saludar</button>

Interpolation:

{{ titulo }}
{{ 2 + 2 }}
{{ getNombre() }}

Property Binding:

<img [src]="imagenUrl">
<button [disabled]="isDisabled">Click</button>

Event Binding:

<button (click)="onClick()">Click</button>
<input (input)="onInput($event)">

Directivas Estructurales:

<!-- ngIf -->
<div *ngIf="mostrar">Contenido</div>

<!-- ngFor -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<!-- ngSwitch -->
<div [ngSwitch]="color">
  <p *ngSwitchCase="'rojo'">Rojo</p>
  <p *ngSwitchCase="'azul'">Azul</p>
</div>

Directivas de Atributo:

<!-- ngClass -->
<div [ngClass]="{'clase1': activo, 'clase2': !activo}">

<!-- ngStyle -->
<div [ngStyle]="{'color': colorTexto}">

Crear Servicio:

ng g service servicios/datos

// datos.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DatosService {
  private datos = ['item1', 'item2'];
  
  getDatos() {
    return this.datos;
  }
}

Usar Servicio:

import { DatosService } from '../servicios/datos.service';

constructor(private datosService: DatosService) {}

ngOnInit() {
  this.items = this.datosService.getDatos();
}

HttpClient:

// En app.module.ts
import { HttpClientModule } from '@angular/common/http';

// En el servicio
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getUsuarios() {
  return this.http.get('https://api.ejemplo.com/usuarios');
}

Pipes Incorporados:

{{ nombre | uppercase }}
{{ precio | currency:'USD' }}
{{ fecha | date:'short' }}
{{ texto | slice:0:10 }}

Crear Pipe:

ng g pipe pipes/mi-pipe

@Pipe({name: 'miPipe'})
export class MiPipePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Crear Módulo:

ng generate module nombbre
ng g m nombre --route nombre --module app.module

Lazy Loading:

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module') }
];

Configurar Rutas (app-routing.module.ts):

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' }
];

Navegación:

<!-- Con routerLink -->
<a routerLink="/">Inicio</a>
<a [routerLink]="['/about', id]">Detalle</a>

<!-- Con código -->
import { Router } from '@angular/router';
this.router.navigate(['/about']);

Guards:

ng g guard auth

// auth.guard.ts
canActivate() {
  if (this.authService.estaLogueado()) {
    return true;
  }
  this.router.navigate(['/login']);
  return false;
}

Formulario Reactivo:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    nombre: ['', [Validators.required, Validators.minLength(3)]],
    email: ['', [Validators.required, Validators.email]],
    edad: ['', [Validators.required, Validators.min(18)]]
  });
}

onSubmit() {
  if (this.form.valid) {
    console.log(this.form.value);
  }
}

Template:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="nombre">
  <div *ngIf="form.get('nombre')?.errors">
    Nombre requerido
  </div>
  <button type="submit" [disabled]="!form.valid">
    Enviar
  </button>
</form>

Testing con Jasmine:

describe('AppComponent', () => {
  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Testing de Servicio:

describe('DataService', () => {
  let service: DataService;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [DataService]
    });
    service = TestBed.inject(DataService);
  });
  
  it('should return data', () => {
    expect(service.getData()).toBeDefined();
  });
});

Build para Producción:

ng build --configuration=production

# O shorthand
ng build --prod

Optimizar Bundle:

# En angular.json
"optimization": true,
"sourceMap": false,
"namedChunks": false

Deploy en Firebase:

npm install -g firebase-tools
firebase init
ng build
firebase deploy