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

NgTable es un módulo que nos permite crear tablas con paginación, ordenación por columnas, filtros, edición directamente contra la tabla y muchas más opciones típicas de, por ejemplo, datatables o jtables en angularjs.

Para este ejemplo veremos cómo crear el ejemplo más sencillo, que es la paginación y otro más complejo, que es la edición.

Los ejemplo de ngtable son con datos estáticos, nosotros mejoraremos ese aspecto y obtendremos los datos de un servicio rest ya creado anteriormente en el vídeo tutorial api rest con slim haciendo uso de servicios y promesas.

Las dependencias que necesitamos instalar a través de bower son las siguientes.


Una vez los tengamos instalados y tengamos el servicio rest listo (api rest con slim) podemos crear nuestro archivo app.js en la raíz y añadir el siguiente código javascript.


Ahora ya tenemos el código necesario con la información formateada y preparada correctamente para que el módulo ngtable de angularjs pueda trabajar, crea una carpeta llamada templates en la raíz del proyecto y dentro dos archivos, pagination.html y edit.html. También debes crear el archivo index.html en la raíz del proyecto y añadir el siguiente código.


Abre el archivo pagination.html y añade el siguiente código.

Cómo puedes ver, no tenemos nada especial, en $data tenemos la información lista para recorrer y hacemos eso, tableParams lo hemos mandado con el $scope desde nuestro controlador, así podemos acceder a toda la info.

Haz lo mismo con el archivo edit.html.


Aquí tenemos más cosas, sobre todo un botón que nos permite salvar nuestro book, la lógica de que sea visualizado o no se hace a través de ng-if y se setea con ng-click, si vemos el botón de salvar tenemos dos acciones, una que setea book.$edit y otra que llama a la función save pasando el book en cuestión, es útil ver cómo podemos utilizar tanta lógica como necesitemos con ng-click.

Si accedes en mi caso a (http://localhost/angularjs/ngtable/#/edit) podrás ver la edición, y en (http://localhost/angularjs/ngtable/#/pagination) la paginación sin edición.

En la edición, cuando pulses en salvar simplemente podrás ver un console.log con el objeto book, hacer la actualización te lo dejo a tí, lo interesante es ver cómo utilizar este módulo, y creo que lo hemos conseguido.

Espero que te sirva y te parezca útil, cualquier duda no dudes en comentar, a continuación dejo los archivos para su descarga, tanto la parte de angularjs como la api rest con slim.

Descargar ngtable y api rest slim