La tarea es ejecutar/llamar a una función JS en la carga de la página usando AngularJS. Esta función se puede utilizar para realizar la inicialización.
Llamar a una función o inicializar un solo valor en la carga de la página en AngularJS es bastante fácil. AngularJS nos proporciona una directiva dedicada para esta tarea específica. Es la directiva ng-init.
Sintaxis:
<element ng-init="function()"> Contents... </element>
Ejemplo 1: En este ejemplo, llamaremos a una función para inicializar una variable en la carga de la página.
<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 = "GeeksForGeeks"
}
}]);
</script>
</html>
Salida: la función se llama al cargar la página y el valor de la variable gfg se establece en GeeksForGeeks.
Ejemplo 2: En este ejemplo asignaremos un objeto a la variable gfg y lo usaremos.
<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: "GeeksForGeeks",
location: "India"
}
}
}]);
</script>
</html>
Salida: La variable «gfg» se inicializa con éxito.
Ejemplo 3: En este ejemplo, inicializaremos directamente una variable desde la directiva ng-init.
<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
'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>
Salida: a la variable gfg se le asigna el valor «GeeksForGeeks» en la carga de la página.