AngularJSCordova

Crear modulos personalizados para AngularJS


Muchas veces, cuando usamos AngularJS, necesitamos repetir código HTML dentro de nuestro proyecto, para lo cual la mejor opción es utilizar Directives, pero si usamos directivas, deberemos importar las dependencias,arias en cada lugar que se requiera, lo cual muchas veces se hace un poco tedioso.
Para esto, una solución es la construcción de nuestros propios módulos (modules), para solo importarlos como un modulo normal de la siguiente manera:

y así poder reutilizarlo en cualquier parte de nuestro proyecto sin la necesidad de estar importándolos tantas veces.

El proceso es muy simple, ya que solo hacemos una directiva envuelta en un modulo, con sus respectivas propiedades de una directiva común y corriente, como podemos ver en el siguiente código, el cual es una directiva donde mi controlador lea un archivo JSON llamado contador.json y me muestre el resultado.

como podemos ver en el código anterior, estoy leyendo los datos del archivo mediante $http y utilizando el $scope propio de nuestra directiva divtest para mostrar el contenido en el template.

Un dato importante es la linea comentada (Linea #6: //transclude: true) esta propiedad hace que el el template se compile antes del controlador, por eso la comente, ya que lo primero que requiero es que se ejecute el controlador y luego la directiva.

Ya tenemos nuestro pequeño modulo creado, ahora si, podemos importarlo de manera directa a nuestro index.html:

como podemos ver, usamos nuestra directiva de manera normal mediante el atributo divtest.

No olvidemos importar nuestro archivo ngmicontador.js donde codificamos nuestro modulo, luego simplemente definimos las dependencias en nuestro modulo principal ubicado en el archivo main.js:

una vez culminado los siguientes pasos el resultado seria el siguiente:

angular-modulo

Artículos Relacionados...

Deja un comentario