masudcsesust04/angular-pagination.html

## angular-pagination.html
<!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>
	<!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>