Directiva AngularJS con ejemplo: ng-init, ng-repeat, ng-app, ng-model

¿Qué es una directiva AngularJS?

Una directiva en AngularJS es un comando que da nueva funcionalidad HTML. Cuando angular vaya a través del 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 Controllers. La lógica de estas directivas está en el archivo Angular.js que es proporcionado por Google. Los controladores son los constructos de programación angular de siguiente nivel que permiten la lógica de negocio, pero como se menciona para que una aplicación sea una aplicación angular, no es obligatorio tener un controlador.

En este tutorial, usted aprenderá –

Cómo crear directiva

Como definimos en la introducción, las directivas AngularJS es una forma de extender la funcionalidad de HTML.

Hay 4 directivas definidas en AngularJS.

A continuación se muestra la lista de las directivas AngularJS junto con ejemplos proporcionados para explicar cada una de ellas.

1) ng-app

Esto se utiliza 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 hacer una aplicación HTML normal una aplicación AngularJS.

Explicación del código:

  1. 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 poner en la etiqueta body también.
  2. 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á la siguiente salida cuando ejecute su código en el navegador.

Salida:

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

Esto se utiliza para inicializar los datos de la aplicación. A veces puede requerir 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, vamos a crear una variable llamada “TutorialName” usando la directiva ng-init y mostrar el valor de esa variable en la página.

Explicación del código:

  1. 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”.
  2. Estamos utilizando 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á la siguiente salida cuando ejecute su código en el navegador.

Salida:

En el producto,

  • El resultado muestra claramente la salida de la expresión que contiene la cadena “AngularJS”. Esto es como resultado de la cadena “AngularJS” que se asigna 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 van a estar enlazadas a 2 controles de entrada de texto.
  • A continuación, vamos a mostrar el importe total basado en la multiplicación de los valores de precio y cantidad.

Explicación del código:

  1. La directiva ng-init se agrega a nuestra etiqueta div para definir 2 variables locales; una se llama “cantidad” y la otra es “precio”.
  2. Ahora estamos utilizando la directiva ng-model para vincular los cuadros de texto de “Personas” y “Precio de registro” a nuestras variables locales “cantidad” y “precio” respectivamente.
  3. Finalmente, se muestra el Total a través de una expresión, que es la multiplicación de las variables de cantidad y precio.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

  • 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 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) repetición ng-

Esto 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

Explicación del código:

  1. La directiva ng-init se agrega a nuestra etiqueta div para definir una variable llamada “chapters” que es una variable de matriz que contiene 3 cadenas.
  2. El elemento ng-repeat se utiliza declarando una variable en línea llamada “names” y pasando por cada elemento en la matriz de capítulos.
  3. Finalmente, estamos mostrando el valor de la variable local en línea ‘names’.

Si el código se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

  • 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 de la matriz.

Resumen

  • Las directivas se utilizan para extender la funcionalidad de HTML. Angular proporciona directivas integradas como
  • ng-app – Esto se utiliza para inicializar una aplicación angular.
  • ng-int — Esto se usa para crear variables de aplicación
  • ng-model — Esto se usa para enlazar controles HTML a datos de la aplicación
  • ng-repeat — Se usa para repetir elementos usando angular.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *