Dynamic Pagination using Laravel & AngularJS

Welcome!

Today we will be combining the Laravel framework with Google's Angular JS. This has a variety of uses, but our article will show you how to setup posts within a blog. We will be implementing dynamic pagination using the built in Laravel paginate option.

At the time of this post we were unable to find existing documentation on this approach. We are making this post in hopes that you find it helpful. The entire code can be found on our GitHub.

Tools
For this article we will be using the following tools. It's important that you are familar with the frameworks in order to use the system to it's full advantages.

Let's Get Started

I'll assume that you already have a standard installation of Laravel up and running. If you need to do that first, their site provides a great quickstart guide.

Create Routes & Views

First we will create the routes and view needed to show your blogs posts. We'll build something simple using the grid styles provided by Bootstrap. You can customize this later once the system is hooked up. In this example we'll include 5 posts and next/back buttons.

Inside the routes file we will add a route for the JSON data and one for the actual posts page. Add the following to your app/routes.php file.

Create Database Table & Controller

We will create a new model for our posts. We will name the new model Post. We will also create a new table to save all my posts with some basic structure. We will call this table posts and give it columns for:

ID (auto-increment)

Title (varchar, 100)

Content (varchar, 255)

You should really use php artisan migrate:make create_posts_table here but I won't go into detail on that. Hopefully your familar with the built in migrations.

Now that we have the database table created and populated, lets create a controller for the posts. We will use this to paginate through the posts and fetch their data. We will create a new file in the app/controllers folder and call it PostController.php. Inside we will create a new function json that will geneate the JSON data:

Add & Configure AngularJS

It is time to add AngularJS to the page and unlock all the potential that this framework can offer. Go ahead and include the library in your page. You will also need to create a JS file to place your code.

Important!
Laravel's blade templates use the same opening/closing brackets as AngularJS {{ }}. We must configure AngularJS to use [[ ]] instead to avoid conflicts. We can do that by adding the following code to our newly created js/app.js file.

Fetch & Parse JSON Using AngularJS

If you remember in the beginning we created the route /posts-json/ to serve up the post information using JSON. Now its time to use it. When you load that page you should see something like this.

The data key in the JSON is the one that holds the content of all our posts. When we paginate with Laravel all we need to do is add a page parameter to the URL and Laravel will handle the rest. For example, /posts-json?page=2 would yield the second page of results.

Now its time to write the code snippet for AngularJS that will fetch and parse the JSON + enable the pagination functions. This requires that we write a new controller called postController in our app.js file.

Update! We've updated the code below to use pagination with ngResource. We'll leave the old code commented inline, in case you want to continue using that!