How to execute AngularJS controller function on page load ?
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 = "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 = "w3wiki" } }]); </ script > </ html > |
Output: The function is called on page load and the value of variable gfg is set to w3wiki.
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 = "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: "w3wiki", 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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" > </ script > </ head > < body ng-controller = "MyController" > <!-- initializing the gfg variable to 'w3wiki' --> < center ng-init = "gfg='w3wiki'" > < 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 “w3wiki” on page load.