Decoradores Angular – Cosas necesarias que debemos conocer

Decoradores Angular: empezaremos comentando que AngularJS es un conjunto de librerías de código abierto que utilizamos para hacer aplicaciones web avanzadas del lado del cliente. Es ideal para hacer aplicaciones de negocio y aplicaciones de gestión.

Ventajas que nos ofrece AngularJS

AngularJS hace uso del patrón de diseño habitualmente encontrado en el desarrollo web MVC. Esto, junto con otras herramientas disponibles en Angular nos permite un desarrollo ordenado, sencillo de realizar y sobre todo más fácil de mantener en un futuro.

Una de las grandes ventajas que tiene AngularJS es que está apoyado por Google y esto hace que cada día los desarrolladores confiemos más en ello.

Si sois usuarios suscritos al blog, sabréis que en las entradas del framework Ionic siempre hacemos uso de tecnología AngularJS. A su vez, también utilizamos los decoradores Angular que es lo que vamos a explicar a continuación.

Explicación de los decoradores Angular

Los decoradores de Angular JS es un modo de añadir metadatos a declaraciones de clase para ser usados por inyecciones de dependencia o compilaciones de directivas.

Un decorador angular es una clase especial de declaración que puede acoplarse a una clase, método, propiedad o parámetro. Los decoradores se declaran de la siguiente manera @expression, donde la expresión debe evaluar a una función. Gracias al parámetro @ podemos reconocer fácilmente que estamos hablando de un decorador.

¿Cuándo utilizamos los decoradores?

Generalmente usamos los decoradores para extender servicios de terceros, de esta manera evitamos modificar el código original del módulo y en tiempo de ejecución agregamos el funcionamiento que necesitamos. También son utilizados para alterar los datos que hemos definido en campos o parámetros de nuestras propias clases.

Una buena práctica del uso de un decorador sería cuando necesitásemos crear por ejemplo una subclase o tengan que heredar estas de otros tipos, en este momento aplicaríamos un decorador angular. Desde mi punto de vista esta es una de las características más interesantes de typescrypt.

¿Qué tipos de decoradores podemos definir?

En la versión de Angular 2 podemos definir 4 tipos de decoradores: decoradores de clase, decoradores de método, decoradores de propiedad y decoradores de parámetro.
En esta entrada veremos los decoradores de clase y los decoradores de propiedad.

• Decoradores de clase:

  function Saludo(target: Function): void {
    target.prototype.hola=function(): void {
      console.log('Hola!');
    }
  }
  
  @Saludo
  class Bienvenida {
    construct(){
      // Lo que corresponda.
    }
  }
  
  var nuevoSaludo = new Bienvenida();
  nuevoSaludo.hola();

  En este caso el decorador @Saludo decora a la clase Bienvenida con un método para saludar target.prototype.hola que como podemos apreciar en el constructor de la clase no lo contiene.
  Tal y como hemos indicado anteriormente los decoradores de clase nos permiten aumentar contenido de la propia clase.
  Destaquemos que las instrucciones del decorador son ejecutadas antes de que la clase sea instanciada.

  Para comprobar el resultado de este ejercicio podemos hacer uso de Playground http://www.typescriptlang.org/play/index.html. Insertamos nuestro código en la parte izquierda y veremos que automáticamente nos lo convierte en la parte derecha en Javascript puro.

  

  Simplemente tenemos que pulsar sobre el botón Run y sobre la página que nos muestre, que será una página en blanco, pulsar el botón derecho del ratón e inspeccionar elemento (No con firebug). Y seleccionar el modo Consola.

  

• Decoradores de propiedad:

  Los decoradores angular de propiedad son decoradores que deben ser declarados dentro de la propia clase, y podemos destacar que en su función se dispone de 2 parámetros (target y key).Vamos a verlo en código para entenderlo mejor.

  // Declaramos el método del decorador
  function LogCambios(target: Object, key: string) { 
  
    var valorPropiedad: string = this[key];
  
    // Borramos antiguos valores y reasignamos el nuevo en caso de ser necesario.
    if (delete this[key]) {
      Object.defineProperty(target, key, {
        get: function () {
          // Obtenemos el valor
          return valorPropiedad;
        },
        set: function (nuevoValor) {
          // Recuperamos el nuevo valor y lanzamos por consola el mensaje.
          valorPropiedad = nuevoValor;
          console.log(`La ${key} es ahora ${valorPropiedad}`);
        }
      });
    }
  
  }
  
  class Coche {
    @LogCambios
    marca: string;
  }
  
  var coche = new Coche();
  coche.marca = 'Porche';
  coche.marca = 'Ferrari';
  coche.marca = 'Jaguar';

  Como podéis ver he incluido varias líneas de comentarios para comprender su funcionamiento y al igual que en el ejemplo anterior, si queréis ver el resultado en pantalla podéis utilizar el Playground.

  

Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

[wysija_form id=»1″]