$http con Karma y Angular
$http con Karma y Angular
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial de angularjs vamos a ver cómo podemos implementar angular-datatables utilizando requirejs, crearemos un completo ejemplo partiendo de 0, instalaremos todas las dependencias con bower, configuraremos requirejs, haremos la configuración para utilizar angular-datatables y también veremos cómo hacer que soporte multi-idioma.

Lo primero que debemos hacer es crear un proyecto vacío, una vez hecho vamos a instalar todas las dependencias que vamos a utilizar, requirejs, angular-datatables, bootstrap, angular-router.

Instalar las dependencias con bower


Ahora debemos crear una estructura de directorios cómo la siguiente.

angular-datatables-require

Ya que tenemos la estructura necesaria vamos a definir nuestro index.html, el cuál hará la carga de require y este finalmente del resto de dependencias.


Ahora ya tenemos definido el index.html, lo más importante es la carga de require y el atributo data-main que le dice que archivo es el encargado de cargar las dependencias, ahora vamos a definir el archivo app/main.js.


Esta es la forma de incluir angular-datatables con requirejs de forma sencilla.

Ahora vamos a definir nuestro módulo, el cuál estará alojado en el directorio app/modules, así que crea el archivo app.js y añade el siguiente código.


Simplemente definimos las dependencias, entre ellas datatables y angular-datatables y creamos el módulo app que será el único de nuestra aplicación.

Ahora es momento de crear el archivo routes.js dentro del directorio routes, aquí podemos definir las rutas de nuestra aplicación y la carga de dependencias, entre otras la del módulo app.


Ya tenemos una ruta para poder mostrar nuestra tabla, ahora vamos a definir el controlador homeCtrl así que podemos crear ese archivo dentro de controllers.


Este es la parte más importante de la aplicación,inyectamos la factoría users y todas las dependencias necesarias para poder utilizar datatables, obtenemos todos los usuarios con la función getAll de la factoría Users, definimos las opciones de datatables, idioma seleccionado y el número de columnas. Cómo puedes ver, si no queremos que una columna se pueda ordenar simplemente podemos llamar a .notSortable().

Ahora vamos a crear la factoría Users, así que crea el archivo users.js dentro de factories y añade el siguiente código.


El archivo users.json está dentro del directorio data así que añade el siguiente código.


Finalmente sólo nos queda crear el archivo home.html dentro del directorio templates con el siguiente código.


Y eso es todo, así de sencillo es implementar angular-datatables con requirejs, espero que te sea de ayuda en tus proyectos.