Paginating our Angular results
Now we have a ton of results, 730, as seen in this request:
Since we cannot show all 730 at once, and since the API gives us 20 at a time, let's paginate through their APIs.
Getting ready
Use a fresh Laravel installation and follow these steps.
How to do it…
Install a library that helps with pagination and tons of other things:
>npm install angular-ui-bootstrap --save
Then, load the library into our public folder by copying it over to
public/js
andpublic/css
. Later, we will optimize this part of the workflow:You will find all of these here:
Then into the top of
resources/views/layout.blade.php
:And at the bottom of the same file:
Now, in our
public/js/app.js
, we load the library:Now that we have loaded the libraries, let's use the Pagination buttons at the top and bottom of
resources/views/home/_angular_search_results.blade.php
:Let's take a closer look:
The Angular Controller now needs to consider this new API query string and data points:
I will go into the details...