How to execute AngularJS controller function on page load ?

The task is to execute/call a JS function on page load using AngularJS. This function can be used to perform initialization.

Calling a function or initializing a single value on page load in AngularJS is quite easy. AngularJS provides us with a dedicated directive for this specific task. It’s the ng-init directive.
Syntax:

<element ng-init="function()"> Contents... </element>

Example 1: In this example we will call a function to initialize a variable on page load.

<html ng-app="myApp"> 
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 
    </script> 
</head> 
  
<body ng-controller="MyController"> 
  
    <!-- calling the firstFunction to  
         initialize gfg variable -->
    <center ng-init="firstFunction(this)"> 
  
        <!-- gfg variable with no value initially -->
        <h1 style="color: green;">{{gfg}}</h1> 
    </center> 
</body> 
  
<script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 
    myApp.controller('MyController', ['$scope', function($scope) { 
  
        // Function to be called on page load 
        $scope.firstFunction = function($scope) { 
  
            // We need $scope argument as we are 
            // altering the variables defined in 
            // the $scope 
            $scope.gfg = "GeeksForGeeks" 
        } 
    }]); 
</script> 
</html> 

Output: The function is called on page load and the value of variable gfg is set to GeeksForGeeks.
Function Call on Page Load AngularJS output

Example 2: In this example we will assign an object to the variable gfg and use it.

<html ng-app="myApp"> 
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 
    </script> 
</head> 
  
<body ng-controller="MyController"> 
  
    <!-- Calling the firstFunction to  
         initialize gfg variable -->
    <center ng-init="firstFunction(this)"> 
  
        <!-- gfg variable as an object -->
        <h1 style="color: green;">{{gfg.name}}</h1> 
        <h3 style="color: green;">{{gfg.location}}</h3> 
    </center> 
</body> 
  
<script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 
    myApp.controller('MyController', ['$scope', function($scope) { 
  
        // Function to be called on page load 
        $scope.firstFunction = function($scope) { 
  
            // We need $scope argument as we are 
            // altering the variables defined in 
            // the $scope 
  
            // Assigning an object to the gfg variable 
            $scope.gfg = { 
                name: "GeeksForGeeks", 
                location: "India" 
            } 
        } 
    }]); 
</script> 
  
</html> 

Output: The variable “gfg” is initialized successfully.
GFG as an object output

Example 3: In this example we will directly initialize a variable from ng-init directive.

<html ng-app="myApp"> 
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"> 
    </script> 
</head> 
  
<body ng-controller="MyController"> 
  
    <!-- initializing the gfg variable to  
         'GeeksForGeeks' -->
    <center ng-init="gfg='GeeksForGeeks'"> 
        <h1 style="color: green;">{{gfg}}</h1> 
    </center> 
</body> 
  
<script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 
    myApp.controller('MyController', ['$scope', function($scope) { 
  
    }]); 
</script> 
  
</html> 

Output: The variable gfg is assigned the value “GeeksForGeeks” on page load.
init value on Page Load AngularJS output

My Personal Notes

Recommended Posts: