How to execute AngularJS controller function on page load ? - GeeksforGeeks

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.
<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.
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.
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.
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills