En este artículo, aprenderemos sobre las directivas en AngularJS y exploraremos las funciones de varias directivas, como ng-app, ng-init y ng-model en angularJS.
La directiva AngularJS es un comando que brinda una nueva funcionalidad a los documentos HTML. Cuando usamos las directivas de AngularJS, primero encontrará todas las directivas en el documento HTML y luego analizará el documento HTML en consecuencia.
ng-app: ng-app es la directiva que se usa para definir la aplicación AngularJS. Al colocar esto en el documento HTML, indica que se trata de una aplicación AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-app</title>
<script src=
"https://code.angularjs.org/1.6.9/angular.min.js">
</script>
</head>
<body>
<h3>Geeks For Geeks</h3>
<div ng-app="">
This is an example of {{"Angular JS"
+ "ng-app" + "Directive"}}
</div>
</body>
</html>
ng-init: ng-init es la directiva que se utiliza para la inicialización de los datos de la aplicación. De forma sencilla, se utiliza como variable local en AngularJS. A veces necesitamos algunos datos locales en su aplicación, por lo que se puede lograr mediante el uso de la directiva ng-init.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-init</title>
<script src=
"https://code.angularjs.org/1.6.9/angular.min.js">
</script>
</head>
<body>
<h3>Geeks For Geeks</h3>
<div ng-app="" ng-init=
"Website = 'Geeks For Geeks'">
Welcome to {{Website}}
</div>
</body>
</html>
ng-model: el ng-model es la directiva que se utiliza para vincular el valor del control HTML a los datos de la aplicación. Se utiliza para vincular los datos en el documento HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>ng-model</title>
<script src=
"https://code.angularjs.org/1.6.9/angular.min.js">
</script>
</head>
<body>
<h3> Geeks For Geeks </h3>
<div ng-app="" ng-init="price=100; quantity=5">
Enter the price :
<input type="text" ng-model="price">
<br><br>
Enter the quantity :
<input type="text" ng-model="quantity">
<br><br>
Total price : {{price * quantity}}
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por jimishravat2802 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA