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 [email protected] (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;