Related Articles

Related Articles

How to execute AngularJS controller function on page load ?
  • Last Updated : 18 Nov, 2019

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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




My Personal Notes arrow_drop_up
Recommended Articles
Page :