En este articulo vamos a realizar un ejemplo para explicar el concepto de Directivas en AngularJS.
Las directivas son una propiedad de Angular que permiten editar una parte del documento HTML permitiendo crear etiquetas personalizables, atributos y manipular el código, haciendo que éste se adapte y pueda expresar el comportamiento que desea el desarrollador en la aplicación.
directive('miDirectiva',function(){ return { restrict : 'E',templateUrl: 'mi-pagina.html' }; });
restrict : 'E'Define la Directiva para que sea utilizada como una etiqueta HTML:<mi-directiva> </mi-directiva>
restrict : 'A' Define la Directiva para que sea utilizada como un atributo de una etiqueta especifica:<div mi-directiva> </div>
restrict : 'C' Define la Directiva para que sea utilizada como una clase:<div class="mi-directiva"> </div>
restrict : 'M' Define la Directiva para que sea utilizada como un comentario:<!-- directive: mi-directiva -->
templateUrl: Proporciona la url de la plantilla (página) para que ésta sea incluida en la página donde se llame la directiva.Las directivas también permiten incluir controladores en su cuerpo:directive('miDirectiva',function(){
return {
restrict : 'E',
templateUrl: 'mi-pagina.html',
controller: function(){
//contenido del controlador
...
},
controllerAs: 'miControlador' //alias del controlador
};
});Para incluir un controlador en una directiva solo basta con declarar 'controller' y a continuación de éste se declara una función la cual contiene su contenido.
El controlador se usa con un alias el cual permite identificarse en Angular, para el ejemplo anterior este toma el alias de
'miControlador'.A continuación se usa un ejemplo de recordatorio de notas para explicar el concepto.
 |
| código página principal del recordatorio de notas. |
 |
| archivo directivas.js que contiene el modulo principal junto con el controlador que permite agregar notas en la tabla. |
Se crea un archivo .html donde se alojará todo el contenido del recordatorio de notas de la página principal, quedando el nuevo archivo de la siguiente manera:
 |
nuevo archivo tablaDeNotas.html con el contenido principal del recordatorio de notas.
|
 |
| página principal después de cortar todo el contenido del recordatorio de notas. |
Se crea la nueva directiva llamada recordatorioNotas en el archivo directivas.js:
 |
| archivo directivas.js con la nueva directiva. |
- Se elimina el controlador inicial y luego se crea la directiva (Linea 2).
- Se declara la propiedad restrict y se le asigna el valor 'E' el cual le indica que será una etiqueta en el cuerpo principal de la página HTML (Linea 4).
- Se declara la propiedad templateUrl donde se le asignará la ruta del archivo con el contenido separado del recordatorio de notas (Linea 5).
- Una vez eliminado el controlador ctrlDirectiva se declara la propiedad controller en la directiva, se pasa una función anónima y luego se asigna el contenido del controlador inicial (Lineas 6 - 14).
Por ultimo una vez hecho todo lo anterior solo queda agregar la directiva en la página principal como una etiqueta mas. Asi:
 |
| página principal con la directiva declarada como una etiqueta. |
 |
| Resultado final |
No hay comentarios.:
Publicar un comentario
¿Tienes alguna pregunta?