Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (145 sloc) 4.82 KB
title author layout lang ref permalink path tags
Angular 1.5 metodos del ciclo de vida
Marcelo Carmona
post
es
angular-1.5-lifecycle-hooks
angular-1-5-ciclo-de-vida
2016-08-08-angular-1.5-ciclo-de-vida.md
Angularjs
JavaScript

En angular 1.5 los componentes tienen un ciclo de vida bien definido y por medio de los cycle hooks nos permiten enganchar funciones que ayudan a modificar su comportamiento, vamos a ver los roles que tienen cada uno de estos hooks y por que deberías usarlos, es muy importante entenderlos ya que estamos pensando en una aplicación basada en componentes. Los ejemplos los voy a estar escribiendo en ES6, así que si todavía no empezaste a usar Angularjs con ES6 te recomiendo un buen repo que pude servir como boilerplate https://github.com/angularclass/NG6-starter

$onInit

Es una propiedad predefinida por angular que se expone en el controlador del componente a la cual le podemos asignar una función

class ComponentController {
  
  $onInit() {
    this.var1 = 'var1';
    this.var2 = 'var2';
  }
}

Es utilizado para código de inicialización del controller. Esta función es llamada solo una vez, una vez que se establecieron todos los bindings del componente y antes que se establezcan en sus hijos. Angular 2 tiene el método ngOnInit el cual nos servirá para la transición de Angular 1.x.

require

Anteriormente con las directivas usábamos el "require" para heredar métodos de otras directivas y su sintaxis nos permitía usar un String o Array (puedes buscarlo en la documentación de la api https://docs.angularjs.org/api/ng/service/$compile). Con el uso de componentes vamos a poder utilizar "require" utilizand un string.

import template from './myComponent.template.html';
import controller from './myComponent.controller';

const myComponent = {
  require: '^^anotherComponent',
  template,
  controller,
  bindings: {
    input: '<',
    onAction: '&'
  }
};

export default myComponent;

Al hacer uso de require es posible acceder al controlador desde un componente hijo, por ejemplo:

<myList>
  <myItem title="Item 1">
    contents 1
   </myItem>
   <myItem title="Item 2">
    contents 2
   </myItem>
   <myItem title="Item 3">
    contents 3
   </myItem>
</myList>

En este caso MyItem es un buen ejemplo de uso ya que

import template from './myList.template.html';
import controller from './myList.controller';

const myList = {
  transclude: true,
  template,
  controller
};

export default myList;
import template from './myItem.template.html';
import controller from './myItem.controller';

const myItem = {
  bindings: {
    title: '<',
  },
  require: '^^myList',
  transclude: true,
  template,
  controller,
};

export default myItem;
class myItemController {
  
  $onInit() {
    // vamos a poder tener acceso al controller de myList
    this.myList.foo() ;
  }
}

export default myItemController;

$postLink

Llamado después de que el elemento de este controlador y sus hijos hayan sido linkeados. De forma similar a la función post-link, este hook se puede usar para configurar handlers de eventos del DOM y hacer la manipulación del DOM.

class myComponente {
  
  $postLink() {
    ...
  }
}

export default myComponente;

$onChanges

Este hook es el mas importante gracias a el nos permite usar una arquitectura one-way dataflow con angular 1.5.x. Lo que hay que tener en cuenta que este método va a ser ejecutado cada vez que modifica un input del componente. Osea el input esta definido en bindings: {...}. Ya sea por '<' (one-way databinding) o '@' (for evaluated DOM attribute values). Es ejecutado también al inicializar el componente y como parámetro recibe un objeto changes.

class myComponente {
  
  $onChanges(changes) {
    if (changes.name) {
      this.user = changes.user.currentValue;
    }
  }
}

export default myComponente;

Ahora vamos a clonar la data que nos viene para que el valor que reciba el componente sea "inmutable" y lo que significa que no podemos modificar la variable desde el interior de este componente.

class myComponente {
  
  $onChanges(changes) {
    if (changes.name) {
      this.user = angular.copy(changes.user.currentValue);
    }
  }
}

export default myComponente;

$onDestroy

Básicamente es para hacer algo cuando el scope del componente es destruido, antes lo usábamos algo como

$scope.$on('$destroy', function () {
    // destroy event
  });

Ahora podemos escribirlo asi

class myComponente {
  
  $onDestroy() {
    // el scope del componente es destruido
  }
}

export default myComponente;