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.