Fundamentos de Angular

Los componentes

Un componente se corresponde con una clase que expone una vista y definen la manera en la que el usuario interactúa con esta vista. Se trata del elemento básico de una aplicación Angular, una aplicación que ella misma es un componente.

Un componente puede estar él mismo compuesto por uno o varios componentes, por lo que una aplicación se corresponde con un ensamblado de estos elementos. La idea es que un componente debe ser independiente para ser reutilizable, sin importar los componentes que le referencian.

El esquema anterior ilustra el principio de componibilidad añadido por los componentes de Angular. Un componente raíz, llamado ComponenteRaiz, define la base de la aplicación. Este componente se basa en los componentes llamados ComponenteHijo1 y ComponenteHijo2. Este último componente está, él mismo, compuesto por otros componentes.

Como se ha dicho anteriormente, un componente Angular se corresponde con una clase TypeScript. Esta clase puede declarar propiedades y métodos que se expondrán como modelo del componente y por lo tanto, serán accesibles desde la vista.

export class TodolistComponent {  
} 

La clase TypeScript anterior representa un componente....

Los templates

Un template es el código HTML que representa una vista. Esta vista describe a Angular cómo se debe renderizar el componente al que está asociado.

La asociación entre un componente y un template, se hace con las propiedades template o templateUrl del decorador @Component. Permiten respectivamente declarar un template directamente en el atributo o definir una URL hacia un archivo correspondiente al template.

import { Component } from '@angular/core';  
  
@Component({  
 selector: ‘app-todolist',  
 template: ‘<h1>Mi Todo List</h1>'  
});  
export class TodolistComponent {  
   [...]  
} 

Aquí el template se define directamente dentro del decorador @Component. 

Si el template es demasiado grande, es mejor externalizarlo en un archivo separado. En este caso, es preferible externalizar este template en un archivo separado y referenciarlo con la propiedad templateUrl.

import { Component } from '@angular/core';  
  
@Component({  
 selector: ‘app-todolist',  
 templateUrl: './todo-list.component.html',  
});  
export class TodoListComponent {  
   [...]  
} 

Aquí el template se define con la propiedad templateUrl.

<h1>Mi Todo List</h1> 

El código anterior se corresponde con el archivo todo-list.component.html.

import { Component } from '@angular/core';  
  
@Component({  
 selector: ‘app-todolist',  
 template: ‘<h1>{{listName}}</h1>'  
});  
export class TodolistComponent {  
    listName = 'Mi Todo List';  
} 

Los pipes

En una aplicación Angular no es raro realizar una transformación en un elemento, antes de visualizarlo. El ejemplo más sencillo es el de una fecha. Cuando se muestra una fecha, raramente está en el formato tradicional JavaScript. En efecto, una fecha JavaScript se muestra en el formato siguiente: Sun Jul 10 2016 17:03:07 GMT+0200 (Paris, Madrid (hora de verano)), mientras que un usuario estará normalmente acostumbrado a leerla en un formato más accesible, como 10/06/2017. El pipe es el elemento que va a permitir gestionar estas transformaciones.

import { Component } from '@angular/core';  
  
@Component({  
  selector: 'today',  
  template: `<p>Estamos en el {{today | date}}</p>`  
})  
export class TodayComponent {  
  today = new Date();  
} 

<p>Estamos en el {{today | date:"MM/dd/yyyy"}}</p> 

Los módulos

Un módulo permite organizar una aplicación en bloques funcionales o técnicos. También es el punto de entrada de una aplicación Angular.

De la misma manera que sucede con un componente, un módulo se declara con una clase TypeScript y se debe decorar por el atributo @NgModule:

@NgModule({  
  imports: [BrowserModule],  
  declarations: [AppComponent],  
  bootstrap: [AppComponent],  
})  
export class AppModule { } 

Este atributo tiene principalmente las siguientes propiedades:

Un ejemplo de módulo que normalmente nos encontramos se corresponde con el módulo de enrutamiento. Permite aislar el módulo aplicativo que contiene todo el funcionamiento de negocio, de la declaración de las rutas que contaminarían...

Observable y promesa

JavaScript es un lenguaje por naturaleza fuertemente asíncrono. Históricamente, la asincronía se ha gestionado con el mecanismo de callback.

myAsynchronousMethod(function(data) {  
    console.log(data)  
}); 

Los callbacks, aunque funcionan, presentan muchas limitaciones: gestión de errores, encadenamiento de llamadas asíncronas, etc.

Para esto, ES6 (EcmaScript 6) ofrece una especificación: las Promises. Una promise es una promesa que permite ejecutar código solo cuando la acción asíncrona termina.

Las promises tienen tres estados: pending cuando la acción asíncrona se está ejecutando, fulfilled cuando la acción se ha realizado con éxito y rejected cuando la acción ha generado un error.

myAsynchronousMethod.then(function(data) {  
    console.log(data);  
}, function(error) {  
    console.error(error);  
}); 

El método anterior es asíncrono y expone una promesa. Los parámetros pasados como argumentos se corresponden con el callback de éxito y de error. 

Angular también utiliza la noción de observable, introducida por la librería RxJS. A diferencia...