AngularJS es un marco MVC de código abierto que es muy similar al marco de JavaScript.
Las directivas son marcadores en el elemento DOM que le dicen a Angular JS que adjunte un comportamiento específico a ese elemento DOM o incluso transforme el elemento DOM con sus elementos secundarios. Simple AngularJS permite extender HTML con nuevos atributos llamados Directivas. AngularJS tiene un conjunto de directivas integradas que ofrecen funcionalidad a las aplicaciones. También define sus propias directivas.
Una directiva se puede definir usando algunas funciones que son: Nombre del elemento, Atributo, Clase, Comentario.
¿Por qué usarlo?
- Brinda soporte para crear directivas personalizadas para un tipo diferente de elementos.
- Una directiva se activa cuando el mismo elemento o elemento coincidente está al frente.
- Se utiliza para dar más potencia a HTML ayudándolos con la nueva sintaxis.
- Las clases directivas, como las clases de componentes, pueden implementar enlaces de ciclo de vida para influir en su configuración y comportamiento.
Componentes de directiva: las directivas de AngularJS amplían el atributo con el prefijo ng-. Algunos componentes de la directiva se analizan a continuación:
- ng-app: es una aplicación AngularJS de arranque automático que dice que todo AngularJS debe tener un elemento raíz.
Ejemplo:
<html><head><title>AngularJS ng-app Directive</title><scriptsrc=</script></head><bodystyle="text-align:center"><h2style="color:green">ng-app directive</h2><divng-app=""ng-init="name='GeeksforGeeks'"><p>{{ name }} is the portal for geeks.</p></div></body></html>Producción:
- ng-controller: la directiva ng-controller en AngularJS se usa para agregar un controlador a la aplicación. Se puede usar para agregar métodos, funciones y variables que se pueden llamar en algún evento como un clic, etc. para realizar una determinada acción.
Ejemplo:
<!DOCTYPE html><html><head><title>ng-controller Directive</title><scriptsrc=</script></head><bodyng-app="app"style="text-align:center"><h1style="color:green">GeeksforGeeks</h1><h2>ng-controller Directive</h2><br><divng-controller="geek">Name: <inputclass="form-control"type="text"ng-model="name"><br><br>You entered: <b><span>{{name}}</span></b></div><script>var app = angular.module('app', []);app.controller('geek', function ($scope) {$scope.name = "geeksforgeeks";});</script></body></html>Producción:
- ng-bind: se utiliza para vincular/reemplazar el contenido de texto de un elemento en particular con el valor que se ingresa en la expresión dada. El valor del contenido HTML especificado se actualiza cada vez que cambia el valor de la expresión en la directiva ng-bind.
Ejemplo:
<!DOCTYPE html><html><head><title>ng-checked Directive</title><scriptsrc=</script></head><bodyng-app="gfg"style="text-align:center"><h1style="color:green">GeeksforGeeks</h1><h2>ng-bind Directive</h2><divng-controller="app">num1: <inputtype="number"ng-model="num1"ng-change="product()"/><br><br>num2: <inputtype="number"ng-model="num2"ng-change="product()"/><br><br><b>Product:</b> <spanng-bind="result"></span></div><script>var app = angular.module("gfg", []);app.controller('app', ['$scope', function ($app) {$app.num1 = 1;$app.num2 = 1;$app.product = function() {$app.result = ($app.num1 * $app.num2);}}]);</script></body></html>Producción:
Beneficios de la Directiva AngularJS:
- Las directivas son útiles para crear código repetido e independiente.
- Modularizan el código agrupando funciones de comportamiento específicas de requisitos en un solo lugar. No crea objetos en el controlador central y los manipula usando múltiples métodos de JavaScript.
- Este tipo de código modular tendrá múltiples directivas que pueden manejar sus propias funcionalidades y datos, y el trabajo debe estar aislado de otras directivas.
- Como beneficio adicional, la página HTML y los scripts de Angular se vuelven menos desordenados y más organizados.
Publicación traducida automáticamente
Artículo escrito por adityadubey10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA