Directivas de AngularJS

AngularJS le permite usar lo que se llama “directivanueva propiedad para expandir HTML.

AngularJS tiene un conjunto de directivas integradas que pueden proporcionar funcionalidades a su aplicación.

AngularJS también te permite definir tus propias instrucciones.

Directivas de AngularJS

Las instrucciones de AngularJS son atributos extendidos de HTML con prefijo ng-.

al cargar la página web, La instrucción inicializa la aplicación de AngularJS.

instrucción ng-init La instrucción inicializa los datos de la aplicación.

ng-model las instrucciones vinculan el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.

Lee más sobre todas las instrucciones de AngularJS en nuestra referencia de instrucciones de AngularJS.

instancia

<div ng-app="" ng-init="firstName='Bill'">
<p>Nombre: <input type="text" ng-model="firstName"></p>
<p>Escribiste: {{ firstName }}</p>
</ul>

Prueba personalmente

al cargar la página web, la instrucción también le dice a AngularJS que el elemento <div> es el 'propietario' de la aplicación.

vinculación de datos

En el ejemplo anterior, {{ firstName }} Una expresión es una expresión de vinculación de datos de AngularJS.

La vinculación de datos de AngularJS enlaza expresiones de AngularJS con datos de AngularJS.

{{ firstName }} con ng-model="firstName" unidos.

En el siguiente ejemplo, dos campos de texto se unen mediante dos instrucciones ng-model:

instancia

<div ng-app="" ng-init="quantity=1;price=5">
Cantidad: <input type="number" ng-model="quantity">
Costos:    <input type="number" ng-model="price">
Total en dólares: {{ quantity * price }}
</ul>

Prueba personalmente

Usar instrucción ng-init no es común. Aprenderás cómo inicializar datos en el capítulo sobre controladores.

repetir elementos HTML

ng-repeat Instrucción de repetición de elementos HTML:

instancia

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  {name:'Kai',country:'Denmark'}]
    <ul>
      {{ x }}
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

Prueba personalmente

ng-repeat la instrucción realmente itera sobre cada elementoclona un elemento HTML una vez.

para arrays de objetos ng-repeat Instrucción:

instancia

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
{name:'Kai',country:'Denmark'}]
  <ul>
    <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
</li>
</ul>

Prueba personalmente

</div>

AngularJS es muy adecuado para aplicaciones CRUD (crear, leer, actualizar, eliminar) de base de datos.

imagine que estos objetos son registros de una base de datos.

al cargar la página web, la instrucción ng-init defineinstrucción ng-app.

elemento raízal cargar la página web, ng-appla instrucciónencuesta automática

la aplicación (inicialización automática).

instrucción ng-init la instrucción ng-init definevalor inicial.

Normalmente, no utiliza ng-init. Usará el controlador o el módulo.

más tarde aprenderá más sobre los controladores y módulos.

instrucción ng-model

ng-model las instrucciones vinculan el valor de los controles HTML (input, select, textarea) a los datos de la aplicación.

ng-model las instrucciones también pueden:

  • proporcionar validación de tipo de datos de la aplicación (número, correo electrónico, obligatorio)
  • proporcionar estado de datos de la aplicación (no válido, sucio, tocado, error)
  • proporcionar clases CSS para elementos HTML
  • vincular elementos HTML a formularios HTML

leer más sobre ng-model información de la instrucción.

Crear nueva instrucción

Además de todas las instrucciones integradas de AngularJS, también puede crear sus propias instrucciones.

la nueva instrucción se crea utilizando .directive creada por la función.

para llamar a la nueva instrucción, cree un elemento HTML con el mismo nombre de etiqueta que la nueva instrucción.

al nombrar las instrucciones, debe usar nombres en mayúsculas y minúsculas juntas,w3TestDirective, pero debe usar el nombre separado por guiones para llamarlo,w3-test-directive:

instancia

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>¡Hecho por una directiva!</h1>"
  });
});
</script>
</body>

Prueba personalmente

puede llamar a la instrucción de la siguiente manera:

  • nombre de elemento
  • propiedad
  • clase
  • comentario

los siguientes ejemplos producirán el mismo resultado:

nombre de elemento

<w3-test-directive></w3-test-directive>

Prueba personalmente

propiedad

<div w3-test-directive></div>

Prueba personalmente

clase

<div class="w3-test-directive"></div>

Prueba personalmente

comentario

<!-- directive: w3-test-directive -->

Prueba personalmente

Limitar

Puedes limitar tu instrucción para que solo se pueda invocar a través de ciertos métodos.

instancia

Agregando un valor de "A" del restrict Atributo, la instrucción solo se puede invocar a través de atributos:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>¡Hecho por una directiva!</h1>"
  });
});

Prueba personalmente

Los valores legales de restrict son:

  • E Representa nombres de elementos
  • A Representa atributos
  • C Representa clases
  • M Representa comentarios

Por defecto, este valor es EA, lo que significa que tanto los nombres de los elementos como los nombres de los atributos pueden invocar instrucciones.