Directivas incorporadas de AngularJS

AngularJS proporciona varias directivas incorporadas que facilitan la creación de aplicaciones web dinámicas. Estas directivas son extensiones del lenguaje HTML que permiten agregar comportamiento interactivo a tus aplicaciones. Aquí tienes algunas de las directivas más comunes y útiles en AngularJS:

1. ng-model:

   • Utilizada principalmente en elementos de entrada (<input>, <select>, <textarea>) para realizar la vinculación de datos bidireccional. Permite que los valores de los elementos de entrada estén sincronizados automáticamente con el modelo de datos en el controlador.

2. ng-bind:

   • Se utiliza para enlazar el contenido de un elemento HTML con una expresión AngularJS. Es similar a {{ }}, pero se utiliza para evitar la visualización de las llaves angulares mientras la aplicación se está cargando.

3. ng-repeat:

   • Utilizada para iterar sobre una colección en el modelo y generar elementos HTML repetidos para cada elemento de la colección. Es útil para mostrar listas de elementos dinámicas.

4. ng-if y ng-show/ng-hide:

   • Permiten mostrar u ocultar elementos HTML basados en una condición evaluada en el controlador. ng-if elimina o agrega elementos del DOM según la condición, mientras que ng-show y ng-hide simplemente cambian su visibilidad CSS.

5. ng-click:

   • Utilizada para asociar una expresión o función en el controlador con un evento de clic en un elemento HTML. Por ejemplo, ng-click="miFuncion()" ejecutará miFuncion() cuando el elemento sea clickeado.

6. ng-class:

   • Permite condicionalmente agregar o eliminar clases CSS de un elemento HTML basado en una expresión evaluada en el controlador. Por ejemplo, ng-class="{ 'clase-activa': isActive }" añadirá la clase clase-activa al elemento si la variable isActive es true.

7. ng-submit:

   • Utilizada para asociar una función en el controlador con el evento de envío de un formulario HTML. Por ejemplo, ng-submit="enviarFormulario()" ejecutará enviarFormulario() cuando se envíe el formulario.

8. ng-src y ng-href:

   • Utilizadas para enlazar los atributos src y href de los elementos HTML respectivamente. Son especialmente útiles cuando se cargan recursos dinámicamente, como imágenes o enlaces.

9. ng-model-options:

   • Permite configurar el comportamiento de vinculación de datos para un elemento ng-model, como el debounce (retardo) en la actualización de los datos del modelo.

10. ng-init:

    • Se utiliza para inicializar variables en el ámbito del controlador directamente desde la vista. Sin embargo, es recomendable evitar su uso en favor de la inicialización de variables en el controlador.

Estas son solo algunas de las muchas directivas incorporadas que AngularJS ofrece para hacer que el desarrollo de aplicaciones web sea más rápido y eficiente. Al dominar el uso de estas directivas, puedes crear aplicaciones más dinámicas y con menos código JavaScript personalizado.