Directivas AngularJS: ng-init, ng-app, ng-model y ng-repeat
james hartman
¿Qué es la directiva en AngularJS?
A Directiva en AngularJS hay un comando que le da a HTML una nueva funcionalidad. Cuando Angular revisa el código HTML, primero encontrará las directivas en la página y luego analizará la página HTML en consecuencia. Un ejemplo simple de una directiva AngularJS, que hemos visto en capítulos anteriores, es la "directiva ng-model". Esta directiva se utiliza para vincular nuestro modelo de datos a nuestra vista.
Nota: Puedes tener código angular básico en una página HTML con las directivas ng-init, ng-repeat y ng-model sin necesidad de tener Controladores. La lógica de estas directivas está en el archivo Angular.js proporcionado por Google. Los controladores son las construcciones de programación angular del siguiente nivel que permiten la lógica empresarial, pero como se mencionó para que una aplicación sea una aplicación angular no es obligatorio tener un controlador.
Cómo crear directivas en AngularJS
Como definimos en la introducción, las directivas AngularJS son una forma de ampliar la funcionalidad de HTML.
Hay 4 directivas definidas en AngularJS.
A continuación se muestra la lista de directivas de AngularJS junto con ejemplos proporcionados para explicar cada una de ellas.
ng-aplicación en AngularJS
Esto se utiliza para inicializar una aplicación Angular.JS. Cuando esta directiva se implementa en una página HTML, básicamente le dice a Angular que esta página HTML es una aplicación angular.js.
Ejemplo de aplicación np
El siguiente ejemplo muestra cómo utilizar la directiva ng-app. En este ejemplo, simplemente vamos a mostrar cómo convertir una aplicación HTML normal en una aplicación angularJS.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
Explicación del código:
- La directiva "ng-app" se agrega a nuestra etiqueta div para indicar que esta aplicación es una aplicación angular.js. Tenga en cuenta que la directiva ng-app se puede aplicar a cualquier etiqueta, por lo que también se puede colocar en la etiqueta del cuerpo.
- Debido a que hemos definido esta aplicación como una aplicación angular.js, ahora podemos utilizar la funcionalidad angular.js. En nuestro caso, usamos expresiones para simplemente concatenar 2 cadenas.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
El resultado muestra claramente el resultado de la expresión que solo fue posible porque definimos la aplicación como una aplicación angularjs.
ng-init en AngularJS
Esto se utiliza para inicializar los datos de la aplicación. A veces es posible que necesite algunos datos locales para su aplicación, esto se puede hacer con la directiva ng-init.
Ejemplo de ng-init
El siguiente ejemplo muestra cómo utilizar la directiva ng-init.
En este ejemplo, crearemos una variable llamada "TutorialName" usando la directiva ng-init y mostraremos el valor de esa variable en la página.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
Explicación del código:
- La directiva ng-init se agrega a nuestra etiqueta div para definir una variable local llamada "TutorialName" y el valor asignado es "AngularJS".
- Estamos usando expresiones en AngularJs para mostrar el resultado del nombre de variable "TutorialName" que se definió en nuestra directiva ng-init.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
En la salida,
- El resultado muestra claramente el resultado de la expresión que contiene la cadena "AngularJS". Esto se debe a que la cadena "AngularJS" se asignó a la variable "TutorialName" en la sección ng-init.
modelo ng en AngularJS
Y finalmente, tenemos la directiva ng-model, que se utiliza para vincular el valor de un control HTML a los datos de la aplicación. El siguiente ejemplo muestra cómo utilizar la directiva ng-model.
Ejemplo de modelo ng
En este ejemplo,
- Vamos a crear 2 variables llamadas “cantidad” y “precio”. Estas variables estarán vinculadas a 2 controles de entrada de texto.
- Luego mostraremos el monto total basado en la multiplicación de los valores de precio y cantidad.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
Explicación del código:
- La directiva ng-init se agrega a nuestra etiqueta div para definir 2 variables locales; uno se llama "cantidad" y el otro es "precio".
- Ahora estamos usando la directiva ng-model para vincular los cuadros de texto de “Personas” y “Precio de registro” a nuestras variables locales “cantidad” y “precio” respectivamente.
- Finalmente, mostramos el Total a través de una expresión, que es la multiplicación de las variables cantidad y precio.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
- El resultado muestra claramente la multiplicación de los valores de Personas y Precio de registro.
Ahora, si vas a los cuadros de texto y cambias el valor de Personas y Precio de Registro, el Total cambiará automáticamente.
- El resultado anterior solo muestra el poder del enlace de datos en angularJs, que se logra con el uso de directiva de modelo ng.
ng-repetir en AngularJS
Esto se utiliza para repetir un elemento HTML. El siguiente ejemplo muestra cómo utilizar el directiva ng-repetir.
Ejemplo de repetición ng
En este ejemplo,
- Tendremos una serie de nombres de capítulos en una variable de matriz y
- luego use la directiva ng-repeat para mostrar cada elemento de la matriz como un elemento de lista
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
Explicación del código:
- La directiva ng-init se agrega a nuestra etiqueta div para definir una variable llamada "capítulos", que es una variable de matriz que contiene 3 cadenas.
- El elemento ng-repeat se utiliza declarando una variable en línea llamada "nombres" y revisando cada elemento en la matriz de capítulos.
- Finalmente, mostramos el valor de la variable en línea local 'nombres'.
Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.
Salida:
- El resultado anterior simplemente muestra que la directiva ng-repeat tomó cada valor en la matriz llamada "capítulos" y creó elementos de lista HTML para cada elemento de la matriz.
Resumen
- Las directivas se utilizan para ampliar la funcionalidad de HTML. Angular proporciona directivas incorporadas como
- ng-app: se utiliza para inicializar una aplicación angular.
- ng-init: esto se utiliza para crear variables de aplicación
- ng-model: se utiliza para vincular controles HTML a datos de la aplicación
- ng-repeat: se utiliza para repetir elementos usando angular.
