Cheatsheet de Angular

Instalar Angular CLI

El Angular CLI facilita la creación y mantenimiento de proyectos Angular.

npm install -g @angular/cli

Verificar la versión de Angular CLI

ng version

Generar un proyecto Angular

Crea un nuevo proyecto usando el Angular CLI.

ng new nombre-proyecto

Ejecutar el servidor de desarrollo

Inicia el servidor de desarrollo en localhost:4200.

ng serve

Inicializar una aplicación Angular

Para inicializar tu aplicación, utiliza la directiva ng-app en tu HTML:

<div ng-app="miApp">
    <!-- Contenido aquí -->
</div>

Definir un módulo

Los módulos son la base de cualquier aplicación Angular. Se definen de la siguiente manera:

var app = angular.module('miApp', []);

Los componentes son una forma moderna de crear directivas que encapsulan tanto la lógica como la vista.

Generar un componente

Utiliza el CLI para generar un componente.

ng generate component nombre-componente

Componentes básicos

Cada componente tiene:

• Un archivo HTML para la vista.
• Un archivo TypeScript para la lógica.
• Un archivo CSS/SCSS para los estilos.

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

@Component({
  selector: 'app-nombre-componente',
  templateUrl: './nombre-componente.component.html',
  styleUrls: ['./nombre-componente.component.css']
})

export class NombreComponenteComponent {
  titulo = 'Hola Angular';
}

Usar un componente en HTML

<mi-componente></mi-componente>

Interpolación de datos

Se utiliza para mostrar datos en la vista desde el componente.

<h1>{{ titulo }}</h1>

Property Binding

Para enlazar propiedades de elementos HTML a variables del componente.

<img [src]="imagenURL">

Event Binding

Para capturar eventos como clics de botones.

<button (click)="miFuncion()">Click Me</button>

Two-way Data Binding

Para enlazar datos del modelo y la vista simultáneamente, se usa ngModel.

<input [(ngModel)]="nombre">

export class AppComponent {
  nombre: string = '';
}

¿Qué son los filtros?

Los filtros se utilizan para formatear datos en las vistas. Angular proporciona varios filtros incorporados, como currency, date, y filter.

Uso de filtros en HTML

<p>Precio: {{ precio | currency }}</p>
<p>Fecha: {{ fecha | date:'fullDate' }}</p>

Las directivas son marcadores en el DOM que le dicen a Angular que se comporte de una manera específica.

ng-model

<input type="text" ng-model="nombre">
<p>Hola, {{ nombre }}!</p>

ng-repeat

Itera sobre una colección

<ul>
    <li ng-repeat="item in items">{{ item }}</li>
</ul>

ng-if

Condicionalmente incluye un elemento en el DOM Condicional para mostrar u ocultar elementos.

<p *ngIf="mostrar">Este texto se mostrará si `mostrar` es verdadero</p>

ngFor

Para iterar sobre listas de elementos.

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

ngClass

Aplica clases dinámicamente.

<div [ngClass]="{'clase-activa': condicion}">Contenido</div>

ngStyle

Aplica estilos dinámicos.

<div [ngStyle]="{'color': colorVariable}">Texto de color dinámico</div>

Crear un controlador

Los controladores son responsables de la lógica de negocio y la manipulación de datos:

app.controller('MiControlador', function($scope) {
    $scope.mensaje = "¡Hola, Angular!";
});

Usar un controlador en HTML

Para vincular un controlador a una parte de tu HTML:

<div ng-controller="MiControlador">
    <p>{{ mensaje }}</p>
</div>

Los servicios son objetos singleton que pueden ser utilizados en toda la aplicación. Se utilizan para manejar la lógica de negocio y compartir datos entre controladores.

Creación de un servicio

Los servicios manejan la lógica de negocios y son inyectados en componentes.

ng generate service nombre-servicio

Definir un servicio

app.service('MiServicio', function() {
    this.mensaje = "¡Hola desde el servicio!";
});

Inyectar un servicio en un controlador

app.controller('MiControlador', function($scope, MiServicio) {
    $scope.mensaje = MiServicio.mensaje;
});

Inyectar un servicio en un componente

Utiliza el decorador @Injectable() y añade el servicio al constructor del componente.

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

@Injectable({
  providedIn: 'root'
})
export class MiServicio {
  obtenerDatos() {
    return ['dato1', 'dato2', 'dato3'];
  }
}

import { MiServicio } from './mi-servicio.service';

export class AppComponent {
  datos: string[];

  constructor(private servicio: MiServicio) {
    this.datos = servicio.obtenerDatos();
  }
}

Configuración de rutas

Configura las rutas en el archivo app-routing.module.ts.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { InicioComponent } from './inicio/inicio.component';
import { DetalleComponent } from './detalle/detalle.component';

const routes: Routes = [
  { path: '', component: InicioComponent },
  { path: 'detalle/:id', component: DetalleComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

RouterLink

Para navegar entre rutas dentro de la aplicación.

<a [routerLink]="['/detalle', item.id]">Ver detalle</a>

Activar navegación desde el código

import { Router } from '@angular/router';

constructor(private router: Router) {}

this.router.navigate(['/ruta-deseada']);

Crear formularios

Angular soporta formularios reactivos para validaciones complejas.

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

export class AppComponent {
  form = new FormGroup({
    nombre: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email])
  });
}

Formulario en la vista

<form [formGroup]="form" (ngSubmit)="enviar()">
  <input formControlName="nombre" placeholder="Nombre">
  <input formControlName="email" placeholder="Email">
  <button type="submit" [disabled]="form.invalid">Enviar</button>
</form>

Validaciones

Se pueden aplicar validaciones a los controles del formulario.

this.form = new FormGroup({
  nombre: new FormControl('', [Validators.required, Validators.minLength(4)])
});

Mostrar mensajes de error

<div *ngIf="form.get('nombre').invalid && form.get('nombre').touched">
  El nombre es requerido y debe tener al menos 4 caracteres.
</div>

HTTP Client

El servicio HttpClient permite hacer solicitudes HTTP.

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

@Injectable({
  providedIn: 'root'
})
export class MiServicio {
  constructor(private http: HttpClient) {}

  obtenerDatos() {
    return this.http.get('https://api.mi-servidor.com/datos');
  }
}

Realizar una petición GET

this.miServicio.obtenerDatos().subscribe(datos => {
  console.log(datos);
});

Acciones

Definen lo que ocurre en la aplicación.

export const incrementar = createAction('[Contador] Incrementar');

Reducers

Manejan el estado según las acciones.

const _contadorReducer = createReducer(initialState,
  on(incrementar, state => state + 1)
);

export function contadorReducer(state, action) {
  return _contadorReducer(state, action);
}

Selectors

Acceden al estado.

export const selectContador = createSelector(
  (state: AppState) => state.contador
);

Ejecutar pruebas unitarias

Angular utiliza Karma y Jasmine para pruebas unitarias.

ng test

Ejemplo de prueba unitaria

it('should return true when the form is valid', () => {
  component.form.controls['nombre'].setValue('Luis');
  expect(component.form.valid).toBeTruthy();
});