Directivas AngularJS: ng-init, ng-app, ng-model y ng-repeat

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Las directivas de AngularJS extienden el HTML simple con un nuevo comportamiento. Los marcadores ng-app, ng-init, ng-model y ng-repeat inicializan una aplicación, insertan datos locales, vinculan los controles del formulario al modelo y clonan elementos una vez por cada elemento de la colección.

  • 🧩 Idea principal: Una directiva es un marcador en un elemento HTML que le indica al compilador de AngularJS que le adjunte un comportamiento.
  • 🚀 Bootstrap Punto: ng-app declara el elemento raíz e inicia automáticamente AngularJS tan pronto como se carga la página.
  • 🧮 Datos locales: ng-init asigna valores iniciales a las variables de ámbito dentro del marcado, sin necesidad de un controlador.
  • 🔄 Encuadernación bidireccional: ng-model vincula un campo de entrada, un selector o un área de texto a una propiedad de ámbito, de modo que las ediciones actualizan el modelo instantáneamente.
  • 📋 Marcado repetido: ng-repeat clona su elemento anfitrión una vez por cada elemento de un array u objeto.
  • 🎛️ Cuatro formas de invocación: La propiedad restrict acepta E, A, C y M para la sintaxis de elementos, atributos, clases y comentarios.
  • 📚 Biblioteca más amplia: AngularJS incluye docenas de directivas integradas, entre ellas ng-bind, ng-if, ng-show, ng-class y ng-click.
Descubre más

Directivas AngularJS

¿Qué es la directiva en AngularJS?

A Directiva En AngularJS, `ng-model` es un comando que proporciona nuevas funcionalidades a HTML. Al recorrer el código HTML, AngularJS primero busca las directivas en la página y luego analiza el código HTML en consecuencia. Un ejemplo sencillo de directiva de AngularJS, que hemos visto en capítulos anteriores, es la directiva `ng-model`. Esta directiva se utiliza para vincular nuestro modelo de datos con nuestra vista.

Nota: Puedes tener código básico de AngularJS en una página HTML con las directivas ng-init, ng-repeat y ng-model sin necesidad de tener controladores. La lógica para estas directivas está en el archivo AngularJS que es proporcionado por GoogleLos controladores son las construcciones de programación de AngularJS de siguiente nivel que permiten la lógica de negocio, pero como se mencionó, para que una aplicación sea una aplicación AngularJS no es obligatorio tener un controlador.

Pero, ¿cómo es que un navegador termina ejecutando uno?

Cómo funcionan las directivas de AngularJS en HTML

Como definimos en la introducción, una directiva de AngularJS es una forma de extender la funcionalidad de HTMLCuando se carga la página, el compilador de AngularJS recorre el DOM, compara cada elemento con las directivas registradas y le asigna el comportamiento que encuentra.

AngularJS El sistema incluye docenas de directivas integradas, además de las que registres tú mismo. Las cuatro que se explican a continuación con ejemplos prácticos (ng-app, ng-init, ng-model y ng-repeat) son las que los principiantes suelen encontrar primero. Antes de ver esos ejemplos, ten en cuenta las cuatro formas en que se puede escribir una directiva.

¿Cuáles son los cuatro tipos de directivas de AngularJS?

Una directiva no siempre es un atributo. El compilador de AngularJS puede hacer coincidir una por nombre de elemento, atributo, nombre de clase o comentario, y cada directiva declara qué formas acepta a través de su restrict propiedad. El valor predeterminado es EAPor lo tanto, tanto la sintaxis de elementos como la de atributos funcionan a menos que se indique lo contrario. El valor es lo más importante al escribir una directiva propia, ya que el compilador ignora cualquier forma que excluya el valor de restricción.

restringir valor Emparejado por Ejemplo de marcado Uso típico
E Nombre del elemento Bloques autónomos que poseen una plantilla
A Atributo Agregar comportamiento a un elemento existente
C Nombre de la clase Marcado heredado que no puede aceptar nuevos atributos
M Comentario Raro, conservado por compatibilidad con versiones anteriores.

👍 Tip: Prefiera la sintaxis de elementos y atributos. Referencia oficial de directivas de AngularJS Considera las formas de clase y comentario como opciones heredadas. Todos los ejemplos a continuación utilizan sintaxis de atributos.

ARTÍCULOS RELACIONADOS

ng-aplicación en AngularJS

Esto se utiliza para inicializar una aplicación AngularJS. Cuando esta directiva se encuentra en una página HTML, básicamente le indica a AngularJS que esa página HTML es una aplicación AngularJS.

Ejemplo de ng-app

El siguiente ejemplo muestra cómo convertir una aplicación HTML normal en una aplicación AngularJS.

ng-aplicación en 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>

⚠️ Advertencia: El anuncio conserva el original. chrset="UTF 8", exactamente como se publicó. El atributo correcto es charset="UTF-8".

Code Explicación:

  1. La directiva “ng-app” se agrega a nuestra etiqueta div para indicar que esta aplicación es una aplicación AngularJS. 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 body.
  2. Dado que hemos definido esta aplicación como una aplicación AngularJS, ahora podemos utilizar la funcionalidad de AngularJS. En nuestro caso, estamos utilizando expresiones para simplemente concatenar dos cadenas.

Si el código se ejecuta correctamente, aparecerá la siguiente salida.

Salida:

ng-aplicación en AngularJS

La salida muestra claramente el resultado de la expresión, lo cual fue posible gracias a que definimos la aplicación como una aplicación AngularJS. La siguiente directiva proporciona sus datos.

ng-init en AngularJS

Esto se utiliza para inicializar los datos de la aplicación. En ocasiones, es posible que necesites algunos datos locales para tu aplicación, y esto se puede hacer con la directiva ng-init.

Ejemplo de 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.

ng-init en 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="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Explicación:

  1. La directiva ng-init se agrega a nuestra etiqueta div para definir una variable local llamada "TutorialName" y el valor asignado es "AngularJS".
  2. Estamos utilizando expresiones en AngularJS para mostrar el resultado de la variable llamada "TutorialName", que se definió en nuestra directiva ng-init.

Si el código se ejecuta correctamente, aparecerá la siguiente salida.

Salida:

ng-init en AngularJS

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.

La siguiente directiva envía datos desde la pantalla al modelo.

modelo ng en AngularJS

Y por último, tenemos la directiva ng-model, que se utiliza para vincular el valor de un control HTML a los datos de la aplicación.

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.

modelo ng en 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="" 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>

Code Explicación:

  1. La directiva ng-init se agrega a nuestra etiqueta div para definir 2 variables locales; uno se llama "cantidad" y el otro es "precio".
  2. 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.
  3. 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, aparecerá la siguiente salida.

Salida:

modelo ng en AngularJS

  • El resultado muestra claramente la multiplicación de los valores de Personas y Precio de registro.

Ahora, si modificas el valor de Personas y Precio de inscripción en los cuadros de texto, el Total se actualiza automáticamente.

modelo ng en AngularJS

  • La salida anterior simplemente muestra el poder del enlace de datos en AngularJS, que se logra con el uso de directiva de modelo ng.

El último de los cuatro maneja muchos valores a la vez.

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

ng-repetir en 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="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Explicación:

  1. 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.
  2. El elemento ng-repeat se utiliza declarando una variable en línea llamada "nombres" y revisando cada elemento en la matriz de capítulos.
  3. Finalmente, mostramos el valor de la variable en línea local 'nombres'.

Si el código se ejecuta correctamente, aparecerá la siguiente salida.

Salida:

ng-repetir en AngularJS

  • 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.

Esos cuatro abarcan la puesta en marcha, los datos, la vinculación y la repetición. La siguiente lista muestra lo que sigue.

Otras directivas integradas de AngularJS de uso común

Las cuatro directivas anteriores constituyen el conjunto inicial, no la biblioteca completa. Cada entrada a continuación es un atributo que se coloca directamente en el elemento que controla.

  • ng-bind: Escribe un valor de ámbito en el texto de un elemento sin mostrar brevemente las llaves sin formato al cargar la página.
  • ng-if: Elimina el elemento del DOM cuando su expresión es falsa y lo reconstruye cuando es verdadera.
  • ng-show y ng-hide: Togglvisibilidad con CSS. El elemento permanece en el DOM, por lo que los cambios repetidos cuestan menos.
  • ng-class: Agrega o elimina clases CSS de una expresión, permitiendo que el estilo siga el modelo.
  • ng-click: Ejecuta una expresión o una función de ámbito cuando el usuario hace clic en el elemento.
  • ng-controller: Adjunta un controlador a un bloque de marcado una vez que la página supera el tamaño de ng-init.
  • ng-disabled y ng-readonly: Establezca el atributo de formulario correspondiente siempre que su expresión sea verdadera.

Las preguntas frecuentes que aparecen a continuación responden a las preguntas que suelen surgir tras esta lista.

Preguntas Frecuentes

AngularJS normaliza los nombres de los atributos antes de compararlos. Elimina cualquier prefijo x- o data-, y luego convierte los separadores de guion, dos puntos o guion bajo a formato camel case. Por eso, data-ng-app, x-ng-app y ng:app se resuelven en la misma directiva ngApp.

Ambos imprimen un valor de ámbito. Una expresión de interpolación puede mostrar brevemente sus llaves originales antes de que AngularJS termine de cargarse, mientras que ng-bind deja el elemento vacío hasta que finaliza la compilación. Se recomienda usar ng-bind para el texto que aparece en la parte superior de la página.

No. El soporte oficial para AngularJS finalizó en enero de 2022, por lo que no se publicarán más parches. Las páginas existentes siguen funcionando, pero los nuevos proyectos deben comenzar con Angular moderno, donde estas directivas se convierten en componentes y directivas estructurales como *ngIf y *ngFor.

En parte. Asistentes como Copiloto de GitHub Reescribe ng-repeat como *ngFor y ng-if como *ngIf de forma fiable. La herencia de ámbito, los enlaces bidireccionales y las funciones de enlace personalizadas aún requieren una revisión humana antes de que se publique el código migrado.

Pegue el marcado, la declaración del módulo y la salida de la consola en ChatGPT y pregunta qué directiva no coincide. Normalmente detecta la ausencia de ng-app, un atributo mal escrito o un valor restrict que bloquea la sintaxis elegida.

Resumir este post con: