Las directivas de AngularJS son atributos HTML extendidos que tienen el prefijo ng- . Las directivas son marcadores en el elemento DOM que le indican a Angular JS que adjunte un comportamiento específico a ese elemento DOM o incluso transforme el elemento DOM con sus elementos secundarios. Durante la compilación, el compilador HTML atraviesa las directivas de coincidencia de DOM contra los elementos DOM. Cuando decimos «compilación» para AngularJS, nos referimos a adjuntar directivas a HTML para que sea interactivo y cuando decimos un elemento que coincide con una directiva, nos referimos a cuando se especifica una directiva en su declaración. En AngularJS, las directivas ayudan a hacer que el código sea modular, ya que cada directiva tiene una funcionalidad separada y es independiente de las otras directivas. Esto ayuda a que el código esté más organizado.
Sintaxis:
<div ng-app=""></div>
La mayoría de las directivas comienzan con el prefijo ng-, ng aquí significa Angular. Una directiva también puede comenzar con x- o data-. El guión (-) se puede reemplazar con dos puntos (:) o guión bajo (_) o ambos. Por ejemplo, ng-init se puede escribir como data-ng-init o x-ng-init o data:ng:init o x:ng:init, etc. La mejor práctica es usar el formato delimitado por guiones.
En AngularJS hay un conjunto de directivas integradas como ng-app, ng-init, ng-model y ng-repeat. Además de esto, también podemos crear sus propias directivas conocidas como directivas personalizadas. Aquí, discutiremos algunas de las directivas integradas en detalle.
- ng-app: la directiva ng-app se usa para iniciar una aplicación AngularJS. También se le llama el elemento raíz de la aplicación. Cuando una aplicación AngularJS carga ng-app automáticamente inicia o inicializa la aplicación.
Sintaxis:
<div ng-app=""></div>
- ng-init: la directiva ng-init se usa para inicializar los datos de la aplicación AngularJS asignando valores a las variables.
Sintaxis:
<div ng-init="fruits=['Apple','Banana','Orange','Mango']"></div>
- ng-model: la directiva ng-model define el modelo/variable que se usará en la aplicación AngularJS. Esta directiva se usa para el enlace de datos bidireccional en AngularJS.
Sintaxis:
<input ng-model="name"></input>
- ng-bind: la directiva ng-bind se usa para el enlace en camino en aplicaciones AngularJS. Esto significa que el valor del contenido en el elemento donde se especifica la directiva ng-bind cambia cada vez que cambia el valor de la expresión en la directiva ng-bind.
Sintaxis:
<input ng-bind="name"></input>
- ng-controller: esta directiva se usa para agregar un controlador a la aplicación AngularJS. Un controlador actúa como el pegamento entre el modelo y la vista. Toman la entrada de la vista, la procesan y devuelven la salida para mostrarla al usuario.
Sintaxis:
<div ng-controller="myCtrl"></div>
Ejemplo 1 : En este ejemplo, hemos utilizado las directivas mencionadas anteriormente.
HTML
<html>
<head>
<title>AngularJS Directive</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"
ng-init="title='Program to calculate factorial of a number'">
<h1>{{title}}</h1>
<form>
<label>Enter a number:</label>
<input type="text"
ng-model="num">
<br>
<input type="submit"
ng-click="calculate()">
<p ng-bind="ans"></p>
</form>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.calculate = function() {
$scope.fact = 1;
for(var i = $scope.num; i >= 1; i--) {
$scope.fact = $scope.fact * i;
}
$scope.ans = $scope.fact;
}
})
</script>
</body>
</html>
Explicación : en el ejemplo anterior, hemos usado la directiva ‘ng-app’ para inicializar la aplicación, la directiva ‘ng-controller’ para mencionar el controlador que se está utilizando y la directiva ‘ng-init’ para inicializar el valor de la variable de ‘título’. En la etiqueta <input> hemos usado ‘ng-model’ para el enlace de datos bidireccional, de modo que cada vez que el usuario ingresa un número, se actualiza tanto en la vista como en el modelo y viceversa. Para el botón de envío, hemos utilizado la directiva ‘ng-click’ para especificar la función que se llamará al hacer clic en el botón. En la etiqueta <p> hemos usado la directiva ‘ng-bind’ para vincular el valor de la variable ‘ ans ‘.
Salida: el usuario ingresa un número y hace clic en el botón Enviar, y se calcula y muestra el factorial del número.
Directiva personalizada: también podemos crear su propia directiva o una directiva personalizada. Una directiva personalizada es una directiva definida por el usuario. La directiva personalizada se crea con la ayuda de la función .directive y reemplaza el elemento para el que se usa. La función tiene una propiedad llamada ‘plantilla’ donde puede definir la plantilla de su directiva.
Enfoque: Crear un módulo para la aplicación. Es obligatorio ya que crearemos la directiva personalizada usando este módulo. Luego, cree una directiva personalizada usando la función .directive . Dentro del parámetro de la plantilla, especifique lo que se mostrará cuando se llame a la directiva personalizada. Después de esto, llame a la directiva personalizada especificándola en un elemento HTML.
app.directive("ngExample",function(){
return{
template: ‘<div>GeeksforGeeks</div>
}
});
Puntos a tener en cuenta al crear la directiva personalizada:
- El nombre de la directiva personalizada debe comenzar con ‘ng’.
- Al definir la directiva personalizada, use un caso de camello como ‘ngExample’ mientras que al invocarlo usa un guión como ‘ng-example’.
- Se puede invocar una directiva usando un nombre de elemento, atributo, clase o comentario.
Nombre del elemento:
ng-example><ng-example>
- Atributo:
<div ng-example></div>
- Clase:
<div class="ng-directive"></div>
- Comentario:
<!-- directive: ng-example -- >
Ejemplo 2 : este ejemplo describe la creación de una directiva personalizada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Custom Directive</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div>
<div ng-example=""></div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("ngExample", function() {
return {
template: "<div>GeeksforGeeks</div>"
}
});
</script>
</body>
</html>
Explicación : en el ejemplo anterior, hemos creado un módulo llamado «myApp». Usando el módulo, hemos creado una directiva personalizada llamada «ngExample». En la etiqueta <div> hemos especificado la directiva como «ng-example». Cuando especificamos esta directiva, el valor definido para la plantilla se inyectará en esta etiqueta <div>, imprimiendo así «GeeksforGeeks».
Producción:
Ejemplo 3 : este ejemplo describe la directiva personalizada y el ámbito . Cuando creamos una directiva personalizada en un controlador, por defecto tiene acceso al objeto de alcance de ese controlador. Este ejemplo muestra cómo una directiva personalizada puede usar el alcance del controlador principal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS Custom Directive & Scope
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-example=""></div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "GeeksforGeeks",
$scope.description = {
"topic": "AngularJS Custom directive",
"topicdescription":
"Custom directives are user defined directives"
+ " used to extend HTML functionality."
}
})
app.directive("ngExample", function() {
return {
template:
"<div><h1>{{title}}</h1><p style='font-size:25px'>{{description.topic}}</p>
<p style='font-size:25px'>{{description.topicdescription}}</div>"
}
});
</script>
</body>
</html>
Explicación : en el ejemplo anterior, hemos creado un módulo llamado «myApp», un controlador llamado «myCtrl» y una directiva personalizada llamada «ngExample». En el controlador, hemos adjuntado propiedades denominadas «título» y «descripción» al alcance. Hemos accedido a estas propiedades en la directiva con la ayuda de las expresiones. Hemos usado dos etiquetas <div>. En la etiqueta principal <div>, hemos especificado el controlador usando la directiva «ng-controller». En la otra etiqueta <div> hemos especificado la directiva personalizada como «ng-example».
Salida :
Ejemplo 4 : este ejemplo describe la directiva personalizada y el controlador . Si no creamos la directiva personalizada dentro del controlador, la directiva personalizada aún puede acceder a los miembros del controlador sin usar el objeto de alcance.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS Custom Directive & Controller
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-example=""></div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function() {
this.title = "GeeksforGeeks";
this.courses =
["Live Courses",
"Self-Paced Courses",
"School Courses"];
this.tutorials =
["Practice DS and Algo.",
"Algorithms",
"Data Structure",
"Software Designs",
"CS Subjects", ];
});
app.directive("ngExample", function() {
return {
controller: "myCtrl",
controllerAs: "ctrl",
template:
"<div><h1>{{ctrl.title}}</h1>
<p>Courses</p>
<ul ng-repeat='x in ctrl.courses'><li>{{x}}</li></ul><br>
<p>Tutorials</p>
<ul ng-repeat='x in ctrl.tutorials'><li>{{x}}</li></ul></div>"
}
});
</script>
</body>
</html>
Explicación : en el ejemplo anterior, hemos creado un módulo llamado «myApp», un controlador llamado «myCtrl» y una directiva personalizada llamada «ngExample». Un punto a tener en cuenta aquí es que no hemos adjuntado las propiedades al alcance, sino que las hemos adjuntado al controlador. En la directiva personalizada, mencionamos el nombre del controlador y creamos una referencia al controlador llamado «ctrl». En la plantilla hemos usado las propiedades del controlador como “{{ctrl.title}}”, “{{ctrl.courses}}”, etc. Hemos usado dos etiquetas <div>. En la etiqueta principal <div>, hemos especificado el controlador usando la directiva «ng-controller». En la otra etiqueta <div> hemos especificado la directiva personalizada como «ng-example».
Producción:
Ejemplo 4
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA