En este artículo, veremos la directiva ng-app en AngularJS y comprenderemos su uso con la ayuda de ejemplos.
La directiva ng-app define el comienzo de una aplicación AngularJS . Inicializa el marco AngularJS y especifica el elemento raíz de la aplicación AngularJS. Cada aplicación AngularJS debe contener un elemento raíz. Después de cargar un documento HTML, el marco AngularJS busca la directiva ng-app en la página, si la encuentra, se inicia y compila la plantilla HTML. Aunque puede especificar la directiva ng-app en cualquier elemento DOM, se recomienda especificar la directiva ng-app en la raíz de un documento HTML.
Sintaxis:
<element ng-app=""></element>
Ejemplo 1: este ejemplo describe el uso de la directiva ng-app que ayuda a inicializar la aplicación Angular JS como elemento raíz.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-app directive</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body>
<div>
<p>This is an expression: {{10+10}}</p>
</div>
<div ng-app="">
<p>This is an expression: {{10+10}}</p>
<div>
<p>This is another expression: {{10+10}}</p>
</div>
</div>
</body>
</html>
Explicación: En este ejemplo, hay 2 etiquetas <div>. En la primera etiqueta <div>, hay una etiqueta de párrafo que tiene un mensaje y una expresión AngularJS. Pero en la salida, podemos observar que la expresión no se evalúa. Esto se debe a que la directiva ng-app no está especificada en esta etiqueta. Por otro lado, la directiva ng-app se especifica en la segunda etiqueta <div>, por lo que las expresiones en esa etiqueta se evalúan y el valor se imprime en consecuencia. Entonces podemos decir que el marco AngularJS solo procesará los elementos DOM y sus elementos secundarios donde se aplica la directiva ng-app .
Producción:
directiva ng-app
Usando ng-app con un módulo: también podemos especificar un módulo dentro de la directiva ng-app . Un módulo es un contenedor para las diferentes partes de una aplicación. Puede tener controladores, directivas, fábricas, servicios, etc.
Sintaxis:
<element ng-app="myApp"></element>
Ejemplo 2: en este ejemplo, hemos especificado la directiva ng-app con un módulo llamado «myApp» .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using ng-app with a module</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Name: {{student.name}}</p>
<p>Subject: {{student.subject}}</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.student = {
'name': 'GeeksforGeeks',
'subject': 'AngularJS'
}
});
</script>
</body>
</html>
Explicación: en el ejemplo anterior, en la etiqueta <div>, dado que especificamos un módulo llamado «myApp» en la directiva ng-app , podemos usar el controlador llamado «myCtrl » y sus propiedades como el objeto estudiante.
Producción:
directiva ng-app con un módulo
Nota : una aplicación AngularJS, solo podemos tener una directiva ng-app, en un momento. Si esta directiva se usa más de una vez en la aplicación, se considerará la primera aparición.
Ejemplo 3: En este ejemplo, el usuario puede realizar sumas, restas, multiplicaciones y divisiones de dos números.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Performing arithmetic operation with ng-app directive
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form>
<label>Enter first number: </label>
<input type="number" min="0" ng-model="number1">
<br>
<label>Enter second number:</label>
<input type="number" min="0" ng-model="number2">
<br><br>
<button type="button"
ng-click="add(number1,number2)">
Add
</button>
<button type="button"
ng-click="subtract(number1,number2)">
Subtract
</button>
<button type="button"
ng-click="multiply(number1,number2)">
Multiply
</button>
<button type="button"
ng-click="divide(number1,number2)">
Divide
</button>
</form>
<p>Output:
<input type="text"
value="{{answer}}"
ng-disabled="true">
</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.answer = "";
$scope.add = function(n1, n2) {
$scope.answer = n1 + n2;
};
$scope.subtract = function(n1, n2) {
$scope.answer = n1 - n2;
};
$scope.multiply = function(n1, n2) {
$scope.answer = n1 * n2;
};
$scope.divide = function(n1, n2) {
$scope.answer = n1 / n2;
};
})
</script>
</body>
</html>
Explicación: En el ejemplo anterior, hemos especificado la directiva ng-app con un módulo llamado «myApp». Este módulo tiene un controlador llamado «myCtrl». El controlador tiene además funciones para sumar, restar, multiplicar y dividir los números. Así es como puede usar un módulo con la directiva ng-app.
Producción:
Realizar operaciones aritméticas usando la directiva ng-app con un módulo
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA