Angular 1.5 component life cycle $onInit, $onDestroy, $onChanges

There was a big improvement for AngularJS that I missed, the life cycle of component. Let's see how can we improve our application with it.

I updated some information for $onChanges hook after reference Angular2 document for this hook (10/06/2016).

$onInit hook

Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

$onInit is very useful when I work with smart components. I used to create my component before:

angular.component('blogList', {
    bindings: {
      title: '@',
      controller: 'BlogListCtrl'
    }
});
angular.controller('BlogListCtrl', BlogListCtrl);

// We need $scope for catching, watching events
BlogListCtrl.$inject = ['BlogService', '$scope'];

function BlogListCtrl(BlogService, $scope) {
    this.BlogService = BlogService;
    this.$scope = $scope;
    this.init();
}

BlogListCtrl.prototype.init = function () {
    this.BlogService.fetchBlogs();
};

I used to instantiate variables, call to services that will be used in my controller in init method then call that method in the constructor. There is another approach call to init with ng-init in the template.
The constructor should not call to any method to do any logic, it is for inject dependencies for our class controller. $onInit is very good choice if you want to keep the constructor simple, likes me.
I would change the controller to:

 function BlogListCtrl(BlogService) {
    this.BlogService = BlogService;
}

BlogListCtrl.prototype.$onInit = function () {
    this.BlogService.fetchBlogs();
};

$onDestroy hook

Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers.

There were some situations that I need to clear, revert my objects after switch to new page. I found an useful post for listing destroy event (old blog post from 2013..) with $scope.$on('$destroy', ...). I used this approach util I know there is a better way to structure angularjs application with controllerAs and there is no $scope in Angular2.
Instead of injecting $scope to BlogListCtrl and listen on $destroy event, we only need to implement $onDestroy hook.

BlogListCtrl.prototype.$onDestroy = function () {
    // Revert some objects, cancel timeout, ...
}

$onChanges hook

Called whenever one-way bindings are updated. The changesObj is a hash whose keys are the names of the bound properties that have changed, and the values are an object of the form { currentValue, previousValue, isFirstChange() }. Use this hook to trigger updates within a component such as cloning the bound value to prevent accidental mutation of the outer value.

There is an interesting thing that AngularJS did not mention about $onChanges hook is this hook is only invoked when the value of the input property changes. If the input property is an object, this hook is not invoked if we change the object.

From Angular2 document for ngOnChanges:

Angular only calls the hook when the value of the input property changes. The value of the hero property is the reference to the hero object. Angular doesn't care that the hero's own name property changed. The hero object reference didn't change so, from Angular's perspective, there is no change to report!

Thanks Angular team for created those hooks to make the path to Angular2 be more closer.