Show more style pagination using angularJS

AngularJS show more style pagination for typeKit API

by alexbelij

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid"> <a class="brand" href="#">Pagination with AngularJS for Typekit API</a> 
            <p
            class="navbar-text pull-right"> <a href="http://www.ivivelabs.com" class="navbar-link" target="_blank">iViveLabs</a>

                </p>
        </div>
    </div>
</div>
<div class="container">
    <div ng-controller="MainCtrl">
        <div class="row">
            <div class="alert alert-success pull-left small">{{status_bar}}</div>
        </div>
        <div class="row">
            <table class="table table-hover table-striped table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="family in families">
                        <td><span class="badge">{{family.id}}</span>

                        </td>
                        <td>{{family.name}}</td>
                        <td>{{family.link}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="alert alert-success pull-left small">{{status_bar}}</div>
            <div class="clearfix"></div>
            <p class="pull-left">
                <button class="btn btn-info" ng-show="has_more()" ng-click="show_more()"><i class="icon-plus icon-white"></i> Show More</button> <span id="loading"
                class="loading-bar"><span class="label label-success">Loading..</span></span>
            </p>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400, 700);
 * {
    font-family:roboto;
}
.small {
    font-size:11px;
}

JavaScript

'use strict';

var App = angular.module('PaginationApp', ['services.SharedServices']);

App.controller('MainCtrl', ['$scope', '$filter', 'TypekitService', function ($scope, $filter, Typekit) {
    $scope.loadData = function () {
        var url = 'https://typekit.com/api/v1/json/libraries/full?page=' + $scope.page + '&per_page=' + $scope.per_page + '&callback=JSON_CALLBACK';
        Typekit.getTypekits(url).then(function (response) {
            $scope.more = response.data.library.families.length === $scope.per_page;
            $scope.families = $scope.families.concat(response.data.library.families);
            $scope.status_bar = "Showing " + ($scope.families.length === 0 ? "0" : "1") + " to " + $filter('number')($scope.families.length) + " of " + $filter('number')(response.data.library.pagination.count) + " entries";

        });
    }

    $scope.show_more = function () {
        $scope.page += 1;
        $scope.loadData();
    }

    $scope.has_more = function () {
        return $scope.more;
    }

    $scope.per_page = 10;
    $scope.page = 1;
    $scope.families = [];
    $scope.more = true;
    $scope.status_bar = "";
    $scope.loadData();
}]);


App.factory('TypekitService', ['$http', function ($http) {
    return {
        getTypekits: function (url) {
            return $http.jsonp(url);
        }
    }
}]);

/** Ajax Spinner **/
angular.module('services.SharedServices', []).config(function ($httpProvider) {
    $httpProvider.responseInterceptors.push('myHttpInterceptor');
    var spinnerFunction = function (data, headersGetter) {
        $("#loading").show();
        return data;
    };
    $httpProvider.defaults.transformRequest.push(spinnerFunction);
}).factory('myHttpInterceptor', function ($q, $window) {
    return function (promise) {
        return promise.then(function (response) {
            $("#loading").hide();
            return response;
        }, function (response) {
            $("#loading").hide();
            return...