How to execute AngularJS controller function on page load ?
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= </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= </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= </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.
.png)