What is the lifecycle of an AngularJS Controller?

by

Well, actually the question is what is the life cycle for a ngView controller.

Controllers are not singletons. Anyone can create a new controller and they are never auto-destroyed. The fact is that it’s generally bound to the life cycle of its underlying scope. The controller is not automatically destroyed whenever its scope is destroyed. However, after destroying an underlying scope, its controller is useless (at least, by design, it should be).

Answering your specific question, a ngView directive (as well for ngController directive) will always create a new controller and a new scope every time a navigation happens. And the last scope is going to be destroyed as well.

The life cycle “events” are quite simple. Your “creation event” is the construction of your controller itself. Just run your code. To know when it gets useless (“destruction event”), listen to scope $destroy event: 

$scope.$on('$destroy', function iVeBeenDismissed() {
  // say goodbye to your controller here
  // release resources, cancel request...
})

For ngView specifically, you are able to know when the content gets loaded through the scope event $viewContentLoaded:

$scope.$on('$viewContentLoaded', function readyToTrick() {
  // say hello to your new content here
  // BUT NEVER TOUCHES THE DOM FROM A CONTROLLER
});

Here is a Plunker with a concept proof (open your console window).

More Related Contents:

  1. Passing data between controllers in Angular JS?
  2. How do I share $scope data between states in angularjs ui-router?
  3. AngularJS : Difference between the $observe and $watch methods
  4. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  5. How to get evaluated attributes inside a custom directive
  6. Difference between the ‘controller’, ‘link’ and ‘compile’ functions when defining a directive
  7. AngularJS does not send hidden field value
  8. Problems with circular dependency and OOP in AngularJS
  9. using setInterval in angularjs factory
  10. Adding a custom header to HTTP request using angular.js
  11. Angular.module minification bug
  12. Angular ui-router – how to access parameters in nested, named view, passed from the parent template?
  13. Angular.JS: views sharing same controller, model data resets when changing view
  14. Showing alert in angularjs when user leaves a page
  15. How to pass parameters to a modal?
  16. TypeError: Cannot read property ‘then’ of undefined
  17. Angular 1.6.0: “Possibly unhandled rejection” error [duplicate]
  18. key-value pairs in ng-options
  19. deep merge objects with AngularJS
  20. Angular UI Router: decide child state template on the basis of parent resolved object
  21. AngularJS : Asynchronously initialize filter
  22. VueJs templating. How to load external templates
  23. Format Date time in AngularJS
  24. How to create a custom input type?
  25. Using page’s angular JS in chrome extension
  26. angularjs custom filter to check for values inside a data array
  27. AngularJS application file structure
  28. Validate phone number using angular js
  29. How is AngularJS different from jQuery
  30. AngularJS event on window innerWidth size change

Leave a Comment