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.
Share your thoughts in the comments
Please Login to comment...