Open In App

How to execute AngularJS controller function on page load ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how 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




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
    </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




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
    </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 the ng-init directive. 

HTML




<!DOCTYPE html>
<html ng-app="myApp">
  
<head>
    <script src=
    </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



Last Updated : 08 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads