Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment