In Angular 1.5, components have a well-defined lifecycle. Lifecycle hooks let us attach functions that modify component behavior. We are going to look at the role of each hook and why you should use them. It is important to understand them when thinking about component-based applications. The examples are written in ES6, so if you have not started using AngularJS with ES6 yet, I recommend this repo as a boilerplate: https://github.com/angularclass/NG6-starter

$onInit

It is a predefined property in Angular that is exposed in the component controller, and we can assign a function to it.

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

It is used for controller initialization code. This function is called only once, after all the component bindings have been established and before the bindings are established in its children. Angular 2 has the ngOnInit method, which helps with the Angular 1.x transition.

require

Previously, with directives, we used "require" to access methods from other directives, and its syntax allowed us to use a string or an array (you can look for it in the API documentation: https://docs.angularjs.org/api/ng/service/$compile). With components, we can use "require" with a string.

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

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

export default myComponent

When using require, it is possible to access the controller from a child component, for example:

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

In this case, MyItem is a good usage example:

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() {
    // we will be able to access the myList controller
    this.myList.foo()
  }
}

export default myItemController

$postLink

Called after the element of this controller and its children have been linked. Similar to the post-link function, this hook can be used to configure DOM event handlers and manipulate the DOM.

class myComponente {

  $postLink() {
    ...
  }
}

export default myComponente;

$onChanges

This hook is the most important because it allows us to use a one-way data flow architecture with Angular 1.5.x. Keep in mind that this method executes every time you modify a component input. That is, the input is defined in bindings: {...}. It can be set with < (one-way data binding) or '@' (for evaluated DOM attribute values). It also runs when the component is initialized, and it receives a changes object as a parameter.

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

export default myComponente

Now we are going to clone the incoming data so that the value received by the component is "immutable", which means that we cannot modify the variable from within this component.

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

export default myComponente

$onDestroy

It is basically used to do something when the component's scope is destroyed. Before, we used something like this:

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

Now we can write it like this:

class myComponente {
  $onDestroy() {
    // the scope of the component is destroyed
  }
}

export default myComponente