Merida Design Blog

Publicado el | Tutoriales / , , , ,

Paginación con AngularJS y Laravel

Paginar el contenido de un sitio es muy importante, desde el punto de vista de desempeño paginar ayuda a reducir la carga del sitio y los recursos del servidor, y desde el punto de vista del usuario, se le provée de una interfaz a través de la cual puede navegar entre el contenido y buscar más facilmente la información.

En este tutorial veremos como hacer la paginación con dos de las tecnologías mas populares (y mis favoritas), del lado del cliente usaremos AngularJS y por parte del servidor Laravel.

Ántes de continuar, en este tutorial estoy asumiendo que estas familiarizado con ambos frameworks, si no es así, te recomiento visitar estos links para una introducción:
Laravel 4 From Scratch
Learning to build an application using Angular.js

Configuración del Servicio Web (Laravel)

El primer paso es preparar nuestro servicio web para regresar los resultados paginados en base al número de página que le especifiquemos.

En nuestro archivo app/routes.php definimos la ruta del servicio que se encargará de procesar la petición. Para este tutorial usaré como ejemplo News como el tipo de datos que manejaremos.

...
Route::resource ('news', 'NewsController');

Con ésto hémos definido un servicio tipo resource, por lo que sabemos que cuando se haga una petición tipo GET a la ruta http://tusitio.com/news, laravel buscará un método llamado index en nuestro controlador, y es ahí donde haremos la paginación.

En nuestro archivo app/controllers/news.php colocamos el siguiente código:

public function index()
{
  $max  = Input::has('max') ? Input::get('max') : 10;
  $page = Input::has('page') ? Input::get('page') : 1;
  $skip = $max * ($page - 1);

  $all = News::skip($skip)->take($max)->orderBy('created_at', 'DESC')->get();

  if(count($all) == 0)
    return Response::make(['message' => 'No se encontraron registros'], 404);
  
  return $all;
}

Como podemos ver, en las líneas 3 y 4 recibimos los parámetros que se encargarán de determinar el rango de registros que se devolverán, al mismo tiempo que definimos valores predeterminados, de esta forma si no pasamos ningún parámetro en la petición, el servicio nos devolverá los primeros 10 registros, es decir, la primera página.

Configuración del cliente (AngularJS)

AngularJS cuenta con el módulo ngResource el cual nos permite consumir servicios web tipo RESTful como el que ya hémos configurado.

Para usar este módulo lo primero que debemos hacer es incluir el archivo en el index.html.

<script src="angular.js">
<script src="angular-resource.js">
<script src="app.js">

Visita la documentación oficial del ngResource para ver las opciones de descarga.

Ahora incluimos la dependencia en nuestra aplicación:

(function(){
  'use strict';
  angular.module('myApp', ['ngResource']);
})();

Ya podemos usar el módulo $resource, lo siguiente es definir un servicio a través del método factory del AngularJS.

(function(){
  'use strict';
  angular.module('myApp', ['ngResource'])
    .factory('News', function($resource) {
      return $resource('http://tusitio.com/news/:id', {id: '@id'});
    });
})();

En la línea 5 nos encontramos con ésto: {id: '@id'}, básicamente lo que esa parte del código hace es decirle al resource que cuando encuentre el parámetro id entre el cuerpo de la petición, lo sustituya en la url donde hemos puesto el comodín :id.

Con estás 3 líneas de código ya somos capaces de ejecutar todo el CRUD para el servicio de noticias, ¿genial no?, ahora veamos el código para hacer uso de éste servicio.

(function(){
  'use strict';
  angular.module('myApp', ['ngResource'])
    .factory('News', unction($resource) {
      return $resource('http://tusitio.com/news/:id', {id: '@id'});
    })

    .controller('NewsController', function($scope, News) {
      $scope.news = [];
      
      $scope.getNews = function(page) {
        $scope.news = News.query({
          page: page,
          max: 10  // Recuerda que éste dato es opcional, ya que hemos definido 10 por default en nuestro servicio.
        },
        function(success) {},
        function(error) {});
      };
    });
})();

El método getNews() será el que ejecutes desde el template html, normalmente a través de un ngClick.

Conclusión

Como puedes ver no es complicado implementar paginación usando estos dos frameworks, los cuales por su naturaleza enfocada a servicios RESTful trabajan muy bien juntos. Mi intención en este tutorial era no extenderme demasiado, sin embargo si consideras que es necesario un ejemplo más extenso incluyendo tal vez una demo funcional, no dudes en enviarme tu solicitud en el formulario de abajo o a través de los comentarios.



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: