Cómo crear directivas en AngularJS, lo más básico

Cómo crear directivas en AngularJS, lo más básico

Las directivas en AngularJS permiten crear elementos HTML que son capaces de tener encapsulado su propia plantilla y comportamiento. Sin embargo, la complejidad de una directiva puede aumentar muy rápido ya que existen diversos factores aparte de la creación del mismo. Por tanto, es importante que comprendas todas características que iré mostrando a lo largo de los posts que iré creando. Si eres completamente nuevo, antes de comenzar a crear directivas en AngularJS te recomiendo que eches un vistazo a la creación de módulos y en qué consisten.

Definición de la directiva

Para crear una directiva personalizada es preciso emplear un objeto definición de directiva. Este objeto, que es devuelto desde la función de definición, contiene las propiedades que darán forma a la directiva y cómo actuará en la aplicación.

<script>
	// Definimos el modulo
	angular.module('tutorialDirectiva', [])
	.directive('listarNumeros', function() {
	  // Devolvemos el objeto definición de directiva
	  return {
	    // Nuestra directiva sólo funcionará como elemento (En otro post hablaré de otras formas)
	    restrict: 'E',
	    // La plantilla directiva será el HTML del 'mi-plantilla.html'
	    templateUrl: 'mi-plantilla.html'
	  };
	});
</script>

// Definimos el modulo

angular.module('tutorialDirectiva', [])

.directive('listarNumeros', function() {

// Devolvemos el objeto definición de directiva

return {

// Nuestra directiva sólo funcionará como elemento (En otro post hablaré de otras formas)

restrict: 'E',

// La plantilla directiva será el HTML del 'mi-plantilla.html'

templateUrl: 'mi-plantilla.html'

};

});

</script>

Establecer el HTML de la directiva

En el caso de la plantilla, podemos meter HTML a cañón o un archivo HTML. Es una buena práctica que el HTML de la directiva se encuentra aparte y no en la propia definición de la directiva ya que puede quedar engorroso si es algo medianamente grande. Podéis emplear el HTML de la directiva de un archivo aparte o empleando $templateCache.

Podemos hacer que una etiqueta <script> funcione como un archivo aparte.

<body>
	<div ng-app="tutorialDirectiva">
	  <!-- Registran 'mi-plantilla.html' con $templateCache -->
	  <script type="text/ng-template" id="mi-plantilla.html">
	    <div ng-repeat="num in [1,2,3,4,5]">{{ num }}</div>
	  </script>  
	  
	  <!-- uso de la directiva -->
	  <listar-numeros></listar-numeros>
	</div>
</body>

<body>

</script>

<listar-numeros></listar-numeros>

</div>

</body>

Mediante ng-template empleamos $templateCache que contendrá la plantilla de nuestra directiva. Lo único que hace es crear divs con un número dentro gracias a la directiva ng-repeat. Algo muy simple pero para comenzar está bastante bien.

Al final el empleo de directivas es algo parecido a llamar a una función. En este caso no hemos metido parámetros pero en una directiva podemos definir argumentos que usaremos en la plantilla. Sin embargo, no veas una directiva como una forma de insertar HTML, sería un desperdicio, en esos caso te recomendaría emplear ng-include 😉

Y hasta aquí crear directivas en AngularJS espero que os sirva. A seguir picando 🙂