¿Cuál es el papel de las directivas ng-app, ng-init y ng-model en AngularJS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *