Directiva AngularJS
AngularJS extiende HTML con nuevas propiedades llamadas directivas.
AngularJS agrega funcionalidad a la aplicación a través de instrucciones incorporadas.
AngularJS le permite personalizar las directivas.
Directiva AngularJS
La directiva AngularJS es un atributo HTML extendido con el prefijo ng-.
La Directiva NG-APP inicializa una aplicación AngularJS.
La directiva de INIT NG inicializa los datos de la aplicación.
La Directiva Ng-Model une los valores de los elementos (como el valor del campo de entrada) a la aplicación.
Para obtener instrucciones completas, consulte el Manual de referencia de AngularJS.
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng-init = "firstName = 'John'"> <p> Intente ingresar en el cuadro de entrada: </p> <p> name: <input type = "text" ng-model = "firstName"> </p> <p> que escribió como: {{firstName}} </p> </div> </body> </html>Resultados de ejecución:
Intente ingresar en el cuadro de entrada:
Nombre:
Lo que escribiste es: John
La Directiva NG-APP le dice a AngularJS que el elemento <div> es el "propietario" de la aplicación AngularJS.
Nota: Una página web puede contener múltiples aplicaciones AngularJS que se ejecutan en diferentes elementos.
Enlace de datos
La expresión {{FirstName}} en el ejemplo anterior es una expresión de enlace de datos AngularJS.
Enlace de datos en AngularJS, expresiones de AngularJS sincronizantes y datos AngularJS.
{{FirstName}} se sincroniza por ng-model = "FirstName".
En el siguiente ejemplo, los dos campos de texto están sincronizados por dos directivas de modelo NG:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <divsen-ap-app-app = "" "" "" "" "" "" "" "" "" "" "" "" "" "" "." "" "" "," " data-ng-init = "cantidad = 1; precio = 5"> Cantidad de calculadora de precio: <input type = "number" ng-model = "cantidad"> precio: <input type = "number" ng-model = "precio"> <p> <b> precio total: </b> {{cantidad * precio}}} </p> </div> </body> </hml>Resultados de ejecución:
Calculadora de precios
cantidad: precio:
Precio total: 5
Nota: Usar Ng-Init no es muy común. Aprenderá una mejor manera de inicializar los datos en el capítulo del controlador.
Repetir elementos HTML
La directiva NG-Repeat repite un elemento HTML:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <divsen-ap-app-app = "" "" "" "" "" "" "" "" "" "" "" "" "" "" "." "" "" "," " data-ng-init = "names = ['jani', 'hege', 'kai']"> <p> use ng-repeat a las matrices de bucle </p> <ul> <li data-ng-repeat = "x en nombres"> {{x}} </li> </ul> </div> </body> </hml>Use ng- repita para bucle la matriz
La directiva NG-Repeat se usa en una matriz de objetos:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div -pp-app = "" "" "" "" "" "" "" "," "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "", "" "" "" "," "" "" "", "" "" "" "," "" "" "" "," "" "" "", "" "" "" "", " ng -init = "nombres = [{name: 'jani', país: 'noruega'}, {name: 'hege', país: 'suecia'}, {name: 'kai', país: 'denmark'}]"> <p> loop objeto: </p> <ul> <li ng-depeat = "x In names" }} </li> </ul> </div> </body> </html>Objeto de bucle:
NoteangularJS admite perfectamente las aplicaciones de la base de datos de la base de datos (Agregar creación, lectura, actualización, actualización, eliminar eliminar).
Piense en los objetos en una instancia como registros en una base de datos.
comando ng-app
La Directiva NG-APP define el elemento raíz de una aplicación AngularJS.
La Directiva NG-APP inicia automáticamente (Inicializa automáticamente) la aplicación cuando se carga la página web.
Más tarde aprenderá cómo NG-APP se conecta a un módulo de código a través de un valor (como NG-APP = "MyModule").
Directiva de In-Init
La Directiva de INIT NG define el valor inicial para la aplicación AngularJS.
Normalmente, no se usa Ng-INIT. Usará un controlador o módulo en su lugar.
Aprenderá más sobre controladores y módulos más tarde.
comando ng-model
modelo La directiva vincula los elementos HTML a los datos de la aplicación.
modelo Las instrucciones también pueden ser:
Proporciona verificación de tipo (número, correo electrónico, requerido) para los datos de la aplicación.
Proporciona estado (inválido, sucio, tocado, error) para los datos de la aplicación.
Proporciona una clase CSS para elementos HTML.
Ate los elementos HTML a la forma HTML.
Directiva Ng-Repeat
La directiva NG-Repeat clones HTML elementos una vez para cada elemento en la colección (en una matriz).
Crear directivas personalizadas
Además de las directivas incorporadas en AngularJS, también podemos crear directivas personalizadas.
Puede usar la función .Directiva para agregar directivas personalizadas.
Para llamar a una directiva personalizada, debe agregar un nombre de directiva personalizado al elemento HTML.
Use el método de camello para nombrar una directiva, runaobdirective, pero cuando lo use, debe dividirse, RUNOOB-Directive:
Instancia de angularjs
< ng-app = "myApp"> <Runoob-directive> </runoob-directive> <script> var app = angular.module ("myApp", []); app.Directive ("ranoObDirective", function () {return {Template: "Directiva personalizada!"};}); </cript> </body> </body> </html>Resultados de ejecución:
Comandos personalizados!
Puede llamar a la directiva de las siguientes maneras:
Nombre del elemento
propiedad
Nombre de clase
Comentario
Los siguientes ejemplos también pueden generar el mismo resultado:
Nombre del elemento
< ng-app = "myApp"> <Runoob-directive> </runoob-directive> <script> var app = angular.module ("myApp", []); app.Directive ("ranoObDirective", function () {return {Template: "Directiva personalizada!"};}); </cript> </body> </body> </html>Resultados de ejecución:
Comandos personalizados!
propiedad:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <body <body ng-app = "myapp"> <Divit "<DiviP"> <Diviop "> <DiviC" <DivioP "> <DivIsp" <Divio RUNOOB-Directive> </div> <script> var app = angular.module ("myApp", []); app.directive ("ranoObDirective", function () {return {plantate: "directive personalizado!"};}); </script> </body> </body> </hml>Resultados de ejecución:
Comandos personalizados!
Nombre de la clase:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp"> <siv> <divular> angular.module ("myApp", []); app.directive ("ranoObDirective", function () {return {restrict: "c", plantplate: "c"! "};}); </script> <p> <strong> nota: </strong> Debe establecer el valor de <b> restrictir </b> a" c "para llamar a la directora por el nombre de la clase. </p> </body> </html>Comandos personalizados!
Nota: debe establecer el valor de restringir a "C" para llamar a la Directiva por nombre de clase.
Notas:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp"> <!-directive: directive: directive-Directive- app = angular.module ("myApp", []); app.Directive ("rUNOOBDirective", function () {return {restrict: "m", reemplazar: true, plantate: "directive personalizado!"};}); </script> <p> <strong> nota: </strong> Necesitamos agregar el <strong> reemplazar </strong> atributo a esta instancia, de lo contrario, de lo contrario, los comentarios de lo contrario no serán los comentarios. </p> <p> <strong> nota: </strong> debe establecer el valor de <b> restringir </b> a "m" para invocar la directiva a través de los comentarios. </p> </body> </html>Resultados de ejecución:
Comandos personalizados!
Nota: Necesitamos agregar el atributo reemplazar a esta instancia, de lo contrario, los comentarios no serán visibles.
Nota: debe establecer el valor de restringir a "M" para llamar a la Directiva a través de comentarios.
Uso restringido
Puede restringir que sus directivas se llamen solo de manera específica.
Ejemplo
Al agregar la propiedad de restricción y configurar solo el valor en "A", el comando solo se puede llamar a través de atributos:
Código de ejemplo:
<! Doctype html> <html> <Head> <Meta Charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <cuerpo ng-app = "myApp"> <Runoob-directive> </runoob-directive> <div ranoob-directive> </div> <script> var app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {return {restrict: "a", plantilla: "directivo personalizado!" };}); </script> <p> <strong> nota: </strong> La configuración de la directiva solo se puede llamar a través de los atributos de los elementos HTML estableciendo el valor de atributo <strong> restrictivo </strong> a "A". </p> </body> </html>Resultados de ejecución:
Comandos personalizados!
Nota: El comando de configuración solo se puede llamar configurando el valor de restricción del atributo en "A".
El valor de restricción puede ser el siguiente:
E solo use nombres de elementos
Unas propiedades solo están disponibles
C Solo usa nombres de clases
M solo está disponible para comentarios
El valor predeterminado de restricción es EA, es decir, el comando se puede llamar a través del nombre del elemento y el nombre del atributo.
Lo anterior es la compilación de la información de instrucción AngularJS, y continuará suplementando más tarde