En el artículo anterior dimos un vistazo general sobre lo que TypeScript ofrece, por lo que ahora es el momento de conocer al verdadero protagonista de esta saga y su propuesta para construir nuestro front-end. 

Antiguamente las aplicaciones web dinámicas solían estar repletas de scripts que manipulaban el DOM, dificultando el mantenimiento al estar mezclado el código que manipula la vista con el resto del comportamiento.

¿Qué es Angular?

Angular es un framework hecho en Typescript para crear aplicaciones web. Propone una forma de diseño de front end centrada en el uso de componentes. Un componente es un elemento dinámico de la vista que consta de un template y una clase (de Typescript) asociada.

Para evitar el manejo del DOM, Angular nos provee de una sintaxis declarativa de templates basada en HTML que hace referencia a atributos dinámicos del componente. Angular se encarga de actualizar la vista cuando cambiamos estos atributos.

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

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



@Component({

 selector: 'app-root',

 template: `<div>

              Hola {{nombre}}

            </div>`

})

export class AppComponent {

 nombre: String;



 constructor(httpClient: HttpClient) {

   httpClient.get<String>("/nombre").subscribe(nombreObtenido => this.nombre = nombreObtenido);

 }



}

El código de ejemplo muestra el nombre de una persona que se obtiene mediante una petición http a un back-end. Sin embargo, ¿Es esto lo que debería hacer el componente?. Si nos ponemos a analizar un poco este código vemos que por un lado hay lógica responsable de interactuar con la vista y otra responsable de obtener los datos que utiliza esta vista.

Angular sugiere separar estas dos responsabilidades, por un lado dejar la lógica puramente responsable de la experiencia de usuario en el componente y por otro lado, el resto de la lógica en clases llamadas “servicios”, como por ejemplo llamadas a servicios REST, validaciones y cálculos.

Siguiendo esta estrategia de diseño, nuestro código quedaría de la siguiente manera:

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

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

import { Observable } from 'rxjs';



@Injectable({

  providedIn: 'root'

})

export class NombreService {



  constructor(private httpClient: HttpClient) {

  }



  obtenerNombre(): Observable<String>{

    return this.httpClient.get<String>("/nombre");

  }

}

Nuestro componente que utiliza el servicio:

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

import { NombreService } from './nombre.service';




@Component({

  selector: 'app-root',

  template: `<div>

               Hola {{nombre}}

             </div>`

})

export class AppComponent {

  nombre: String;



  constructor(nombreService: NombreService) {

    nombreService.obtenerNombre().subscribe(nombreObtenido => this.nombre = nombreObtenido);

  }



}

Hasta ahora vimos cómo desarrollar una aplicación usando componentes y servicios. En una próxima entrega veremos cómo organizar nuestra aplicación a medida que va creciendo haciendo uso del concepto de módulos.

¡Hasta la próxima!