How to execute AngularJS Controller function on page load

This article will show you how to execute AngularJS Controller function on page load.

In AngularJS, executing a controller function on page load can be achieved through various methods. Below, we’ll explore several solutions and their implementations.

Private Inner Function Approach

This method involves defining a private inner function within the controller and invoking it immediately after its definition.

// at the bottom of your controller
var init = function () {
   // code to execute on page load
};
// invoke the function immediately after definition
init();

This approach ensures that the function init() is called when the controller is instantiated.

Using ng-init Directive

Another approach is to utilize the ng-init directive within the HTML markup to call a function defined in the controller.

<!-- register controller in HTML -->
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

<!-- in controller -->
$scope.init = function () {
    // code to execute on page load
};

However, it’s important to note that AngularJS documentation discourages the use of ng-init for this purpose, especially since version 1.2, due to architectural considerations.

Using $timeout Function

To ensure that the controller function executes after the markup is rendered, $timeout function can be employed.

// Your controller, including $timeout
$scope.init = function(){
 // code to execute on page load
}

$timeout($scope.init)

This method ensures that the function init() is called after a specified timeout, allowing the DOM to be fully rendered.

Using $viewContentLoaded Event

Although some users reported issues with $viewContentLoaded, it can be used to trigger a function upon the complete rendering of the view.

$scope.$on('$viewContentLoaded', function() {
    // code to execute on page load
});

This event is fired when the view content is fully loaded.

Using $routeChangeSuccess or $stateChangeSuccess Events

These events can be utilized to execute a function when the route or state changes, ensuring that the code runs after the necessary elements are defined.

// For ngRoute
$scope.$on('$routeChangeSuccess', function () {
  // code to execute on page load
});

// For ui-router
$scope.$on('$stateChangeSuccess', function () {
  // code to execute on page load
});

These events are triggered when the route or state transition is successfully completed.

Using $window.onload Event

Angular’s $window object can also be leveraged to execute code when the entire page, including its dependent resources like stylesheets and images, is fully loaded.

$window.onload = function(e) {
  // code to execute on page load
}

This event is triggered when the browser has fully loaded all content on the page.

Using $watch on $viewContentLoaded

Lastly, $watch can be used to monitor changes to the $viewContentLoaded DOM object and execute code accordingly.

$scope.$watch('$viewContentLoaded', function(){
    // code to execute on page load
});

This approach allows for watching changes in the view content loading status and executing the function when it changes.

Choose the method that best suits your application’s architecture and requirements for executing a controller function on page load in AngularJS.