Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS Fácil: Directivas

Jesús Lucas
  • Escrito por Jesús Lucas el 02 de Julio de 2014
  • <1 min de lectura | Frontend
Aprender AngularJS Fácil: Directivas

Las directivas en AngularJS te permiten extender HTML con nuevos atributos. Estos atributos son los que llamamos Directivas .


Directivas de AngujarJS

Las directivas son atributos que extienden a los ya existentes en HTML y comienzan con el prefijo ng- . La directiva ng-app inicializa una nueva aplicación de AnguarJS. La directiva ng-init inicializa datos de la aplicación. Las directiva ng-model enlaza datos de la aplicación a elementos HTML. En el siguiente ejemplo podrás ver el uso de las tres directivas:
<div ng-app="" ng-init="nombre='Paco'">

<p>Nombre: <input type="text" ng-model="nombre"></p>
<p>Has escrito: {{ nombre }}</p>

</div>
Explicación del ejemplo: Si en el input cambias el nombre de la persona, en cualquier lugar que tengamos la expresión {{ nombre }} veremos el dato modificarse al instante, esto se produce gracias a que el dato nombre está enlazado con el input gracias a la directiva ng-model . La directiva ng-app le dice a AngularJS que el elemento </div> es el "propietario" de la aplicación AnguarJS
Una página web puede contener varias aplicaciones AngularJS, corriendo en diferentes elementos.

Enlazado de Datos

La expresión {{ nombre }} , en el ejemplo de arriba, es una expresión de enlazado de datos de AnguarJS. El enlazado de datos en AnguarJS, sincroniza las expresiones de AngujarJS con datos de AnguarJS. {{ nombre }} está sincronizado con ng-model="nombre" . En el siguiente ejemplo dos campos de texto están sincronizados con dos directivas ng-model :
<div ng-app="" ng-init="cantidad=1;precio=5">

Cantidad: <input type="number" ng-model="cantidad">
Costo:    <input type="number" ng-model="precio">

Precio total: {{ cantidad * precio }}

</div>
Por ahora estamos usando ng-init para inicializar nuestros datos. Esto no es muy común. Aprenderás a inicializar datos de la manera correcta cuando hablemos de los controladores.

Repitiendo Elementos HTML

La directiva ng-repeat se encarga de repetir un elemento HTML:
<div ng-app="" ng-init="frutas=['Manzana','Fresa','Banana']">
  <ul>
    <li ng-repeat="f in frutas">
      {{ f }}
    </li>
  </ul>
<div>
</div></div>
Como puedes ver, la directiva ng-repeat es usada con Arrays. El código de arriba provocará que el elemento li se repita tantas veces como frutas hay en el array, la salida será así:
<div ng-app="" ng-init="frutas=['Manzana','Fresa','Banana']">
  <ul>
    <li>Manzana</li>
    <li>Fresa</li>
    <li>Banana</li>
  </ul>
<div>
</div></div>
También podemos usar la directiva ng-repeat con arrays de objetos y expresiones más complejas. Ejemplo:
<div ng-app="" ng-init="coches=[
{marca:'Audi',color:'azul'},
{marca:'Ferrari',color:'rojo'},
{marca:'Mercedes',color:'negro'}]">

<ul>
  <li ng-repeat="c in coches">
    {{ c.marca + ', ' + c.color }}
  </li>
</ul>

</div>
El resultado del código anterior es:
<div ng-app="" ng-init="coches=[
{marca:'Audi',color:'azul'},
{marca:'Ferrari',color:'rojo'},
{marca:'Mercedes',color:'negro'}]">

<ul>
  <li>Audi, azul</li>
  <li>Ferrari, rojo</li>
  <li>Mercedes, negro</li>
</ul>


AngujarJS es perfecto para aplicaciones CRUD (Create Read Update Delete). Solo tienes que pensar como si esos objectos fuesen registros de una base de datos.

Resumen

Directiva ng-app

La directiva ng-app define el elemento raíz de una aplicación AngularJS. La directiva ng-app iniciará y arrancará automáticamente la aplicación AngularJS una vez la página ha cargado. Más tarde aprenderás como ng-app puede tener un valor (como ng-app="miModulo"), para conectar módulos de código.

Directiva ng-init

La directiva ng-init define los valores iniciales de los datos de una aplicación AngularJS. Como anteriormente he comentado, normalmente, no se debe usar ng-init . Usaremos un controlador o un módulo en lugar de esto. Lo aprenderás más adelante.

Directiva ng-model

La directiva ng-model enlaza elemento HTML con datos de la aplicación AngularJS. La directiva ng-model también nos ofrece las siguientes funcionalidades:
  • Provee validación de tipos de los datos de la aplicación ( número, email, requerido).
  • Provee de estado a los datos de la aplicación (invalid, dirty, touched, error).
  • Provee de clases CSS a los elementos HTML.
  • Enlaza elementos HTML a formularios.

Directiva ng-repeat

La directiva ng-repeat clona elementos HTML por cada elemento dentro de una colección (array).
Si ha gustado este artículo no olvides darle a Like y compartirlo por las redes sociales. Si quieres recibir el siguiente artículo en tu email en cuanto esté disponible suscríbete a nuestra lista.

Ver Indice Tutorial

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars