mwin007
11/10/2015 - 3:31 AM

Pagination with AngularJS for Typekit API

Pagination with AngularJS for Typekit API

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Pagination with AngularJS - jsFiddle demo</title>
        <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js'></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-sanitize.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">

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

        <script type='text/javascript'>
            //<![CDATA[ 
            
            '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 $q.reject(response);
                    });
                };
            });
            
            /** Ajax Spinner **/
            //]]>  
        </script>

    </head>
    <body ng-app="PaginationApp">
        <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>

    </body>
</html>