How to execute AngularJS controller function on page load ?
Last Updated :
08 Sep, 2022
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">
<center ng-init="firstFunction(this)">
<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
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
</script>
</head>
<body ng-controller="MyController">
<center ng-init="firstFunction(this)">
<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 the ng-init directive.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
</script>
</head>
<body ng-controller="MyController">
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...