¿Qué es una directiva AngularJS?
Una directiva en AngularJS es un comando que le da a HTML una nueva funcionalidad. Cuando angular revise 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: Puede tener código angular básico en una página HTML con las directivas ng-init, ng-repeat y ng-model sin la necesidad de tener controladores. La lógica de estas directivas está en el archivo Angular.js que proporciona 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.
En este tutorial, aprenderá:
- Cómo crear una directiva
- ng-app
- ng-init
- ng-modelo
- ng-repeat
Cómo crear una directiva
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 las directivas AngularJS junto con los ejemplos que se proporcionan para explicar cada una de ellas.
1) aplicación ng
Esto se usa para inicializar una aplicación Angular.JS. Cuando esta directiva está en su lugar en una página HTML, básicamente le dice a Angular que esta página HTML es una aplicación angular.js.
El siguiente ejemplo muestra cómo usar la directiva ng-app. En este ejemplo, simplemente vamos a mostrar cómo convertir una aplicación HTML normal en una aplicación angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
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 hacer uso de la funcionalidad angular.js. En nuestro caso, estamos usando expresiones para simplemente concatenar 2 cadenas.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
La salida muestra claramente la salida de la expresión que solo fue posible porque definimos la aplicación como una aplicación angularjs.
2) ng-init
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.
El siguiente ejemplo muestra cómo usar 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.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
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 dado a esto es "AngularJS".
- Estamos usando expresiones en AngularJs para mostrar la salida del nombre de variable "TutorialName" que se definió en nuestra directiva ng-init.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
En la salida,
- El resultado muestra claramente la salida de la expresión que contiene la cadena "AngularJS". Esto es como resultado de la cadena "AngularJS" asignada a la variable 'TutorialName' en la sección ng-init.
3) modelo ng
Y finalmente, tenemos la directiva ng-model, que se usa 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.
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 la cantidad total basada en la multiplicación de los valores de precio y cantidad.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
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 mediante una expresión, que es la multiplicación de las variables de cantidad y precio.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
- La salida muestra claramente la multiplicación de los valores para personas y precio de registro.
Ahora, si va a los cuadros de texto y cambia el valor del precio de Personas y Registro, el Total cambiará automáticamente.
- La salida anterior solo muestra el poder del enlace de datos en angularJs, que se logra con el uso de la directiva ng-model.
4) ng-repetir
Se utiliza para repetir un elemento HTML. El siguiente ejemplo muestra cómo utilizar la directiva ng-repeat.
En este ejemplo,
- Vamos a tener una matriz 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
Event Registration Guru99 Global Event
- {{names}}
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 usa declarando una variable en línea llamada "nombres" y revisando cada elemento en la matriz de capítulos.
- Finalmente, estamos mostrando el valor de los 'nombres' de las variables en línea locales.
Si el código se ejecuta correctamente, se mostrará el siguiente resultado cuando ejecute su código en el navegador.
Producción:
- La salida anterior solo muestra que la directiva ng-repeat tomó cada valor en la matriz llamada "capítulos" y creó elementos de lista HTML para cada elemento en la matriz.
Resumen
- Las directivas se utilizan para ampliar la funcionalidad de HTML. Angular proporciona directivas integradas como
- ng-app: se utiliza para inicializar una aplicación angular.
- ng-init: se utiliza para crear variables de aplicación
- ng-model: se utiliza para vincular controles HTML a los datos de la aplicación
- ng-repeat: se usa para repetir elementos usando angular.
