Los amigos que están familiarizados con HTML saben que HTML tiene muchos atributos. Por ejemplo, el atributo HREF de la etiqueta <a> puede especificar la dirección de URL del enlace, y el atributo de tipo de la etiqueta <input> se puede usar para especificar el tipo de entrada. La Directiva AngularJS agrega funciones a las aplicaciones AngularJS al extender los atributos HTML.
La directiva AngularJS se usa para extender HTML. Todas estas son propiedades especiales que comienzan con el prefijo NG. Discutiremos las siguientes directivas:
Directivas AngularJS de uso común
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.
comando ng-app
La Directiva NG-APP inicia una aplicación AngularJS. Define el elemento raíz. Inicializa o inicia automáticamente una aplicación que carga las páginas web de la aplicación AngularJS. También se usa para cargar varios módulos AngularJS Aplicaciones AngularJS. En el siguiente ejemplo, definimos la aplicación AngularJS predeterminada utilizando el atributo NG-APP del elemento DIV.
<div ng-app = ""> ... </div>
Directiva de In-Init
La Directiva de INIT NG inicializa los datos de una aplicación AngularJS. Se utiliza para poner valores en la aplicación para usar variables. En el siguiente ejemplo, inicializaremos la matriz de los países. Use la sintaxis JSON para definir las matrices de países.
<Div ng-app = "" ng-init = "países = [{locale: 'en-us', nombre: 'Estados Unidos'}, {locale: 'en-gb', nombre: 'Reino Unido'}, {locale: 'en-fr', nombre: 'Francia'}]"> ... </div>comando ng-model
La Directiva NG-Model define modelos/variables utilizados en aplicaciones AngularJS. En el siguiente ejemplo, definimos un modelo llamado "nombre".
<div ng-app = ""> ... <p> Ingrese su nombre: <input type = "text" ng-model = "name"> </p> </div>
Directiva Ng-Repeat
La directiva NG-Repeat repite cada elemento en la colección de elementos HTML. En el siguiente ejemplo, hemos iterado sobre los países de la matriz.
<Div ng-app = ""> ... <p> Lista de país con localidad: </p> <ol> <li ng-repeat = "país en países"> {{'país:' + country.name + ', locale:' + country.locale}} </li> </lil> </div>Ejemplo de la directiva AngularJS
<div ng-app = "" ng-init = "firstName = 'John'"> <p> intente ingresar en el cuadro de entrada: </p> <p> name: <input type = "text" ng-model = "firstName"> </p> <p> Qué es: {{firstName}} </p> </div>La Directiva NG-APP le dice a AngularJS que el elemento actual <div> es una aplicación AngularJS. La Directiva NG-Init se utiliza para inicializar los datos, que es equivalente a la variable de definición en JavaScript. Enlace de datos en AngularJS, expresiones de AngularJS sincronizantes y datos AngularJS. {{FirstName}} se sincroniza por ng-model = "FirstName". El ejemplo anterior sincronizará el contenido que ingresó en el cuadro de entrada en la página.
Aviso
Una página web puede contener múltiples aplicaciones AngularJS que se ejecutan en diferentes elementos.
No es muy común inicializar los datos utilizando Ng-Init. Aprenderá una mejor manera de inicializar sus datos en capítulos posteriores.
Directiva Ng-Repeat
La Directiva NG-Repeat repetirá un elemento HTML, que es equivalente a cada bucle en JavaScript.
<div ng-app = "" ng -init = "nombres = ['jani', 'hege', 'kai']"> <p> use ng-repeat to bucle arrays </p> <ul> <li ng-depreat = "x en nombres"> {{x}} </li> </ul> </div>El ejemplo anterior se analizará en el siguiente HTML
<ul> <li> Jani </li> <li> Hege </li> <li> kai </li> </ul>
Ng-Repeat funciona en la matriz de objetos:
<div ng-apx = "" ng -init = "nombres = [{name: 'jani', país: 'noruega'}, {name: 'hege', país: 'sweden'}, {name: 'kai', country: 'denmark'}]"> <p> bucle object: </p> <ul> <i ng-repeat = "x in names"> {{{{{{{{p>. X.Country}} </li> </ul> </div>Se analizará en el siguiente HTML:
<ul> <li> Jani, Noruega </li> <li> Hege, Suecia </li> <li> Kai, Dinamarca </li> </ul>
Comandos personalizados
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, askh5Directive, pero cuando lo use, debe dividirse con - AskH5 -Directive
<cuerpo ng-app = "myApp"> <Skh5-directive> </askh5-directive> <script> var app = angular.module ("myApp", []); app.directive ("askh5Directive", function () {return {Template: "<h1> Directiva personalizada! </h1>"};}); </script> </body>El ejemplo anterior se analiza como:
<h1> comando personalizado! </h1>
Se puede llamar al comando de las siguientes maneras:
Nombre del elemento: <Skh5-directive> </askh5-directive>
Atributo: <Div Askh5-Directive> </div>
Nombre de la clase: <iv> </div>
Comentario: <!-Directiva: AskH5-Directive->
Restringir el uso de restricciones
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.
var app = angular.module ("myApp", []); app.directive ("askH5Directive", function () {return {restrict: "a", plantate: "<h1> directive personalizado! </h1>"};});Angularjs arriba solo permitirá llamadas de propiedad.
Lecturas relacionadas:
Tutorial introductorio de AngularJS: expresiones Angularjs
El contenido anterior es el tutorial introductorio de AngularJS de Angularjs presentados por el editor. ¡Espero que sea útil para todos!