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

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

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

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.

<!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:

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.

<!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:

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.

<!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:

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

• 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

<!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:

• 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