four2theizz0/Ionic-Infinite-Scroll-showing-Github-Commits.markdown

## index.html
<html ng-app="App">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Infinite Scroll</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js">
    </script>
  </head>

  <body ng-controller="Ctrl">
    <ion-pane ng-controller="Ctrl">
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic GitHub Commits</h1>
  </ion-header-bar>
  <ion-content>
    <div class="list">
      <div class="item" ng-repeat="commit in commits">
        <h3>{{commit.commit.message}}</h3>
        <p>{{commit.commit.author.name}}, {{commit.commit.author.date | date:'short'}}</p>
      </div>
    </div>
    <ion-infinite-scroll on-infinite="load()" ng-if="more"></ion-infinite-scroll>
  </ion-content>
</ion-pane>

  </body>
</html>

## Ionic-Infinite-Scroll-showing-Github-Commits.markdown

      
    Raw
  

              Ionic-Infinite-Scroll-showing-Github-Commits.markdown
            
          
    Ionic Infinite Scroll showing Github Commits

This pen shows the Github commits for the Ionic Framework as an infinite scroll list. It makes HTTP requests to load the data (may happen so fast you don't notice) but it only loads 30 items at a time. Please note that Github's API is rate limited, so you get 60 requests an hour unless you sign the request with Github's authentication.
A Pen by Jeremy Wilken on CodePen.
License.

  
## script.js
angular.module('App', ['ionic'])
.controller('Ctrl', function ($scope, $http) {
  var page = 1;
  $scope.commits = [];
  $scope.more = true;
  $scope.load = function () {
    $http.get('https://api.github.com/repos/driftyco/ionic/commits?page=' + page)
    .success(function (commits, status, headers) {
      if (headers('link').search('rel="next"') < 0) {
        $scope.more = false;
      }
      angular.forEach(commits, function (commit) {
        $scope.commits.push(commit);
      });
    })
    .finally(function () {
      page++;
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});
	<html ng-app="App">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Ionic Infinite Scroll</title>

	<link href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
	<script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js">
	</script>
	</head>

	<body ng-controller="Ctrl">
	<ion-pane ng-controller="Ctrl">
	<ion-header-bar class="bar-stable">
	<h1 class="title">Ionic GitHub Commits</h1>
	</ion-header-bar>
	<ion-content>
	<div class="list">
	<div class="item" ng-repeat="commit in commits">
	<h3>{{commit.commit.message}}</h3>
	<p>{{commit.commit.author.name}}, {{commit.commit.author.date \| date:'short'}}</p>
	</div>
	</div>
	<ion-infinite-scroll on-infinite="load()" ng-if="more"></ion-infinite-scroll>
	</ion-content>
	</ion-pane>

	</body>
	</html>
	angular.module('App', ['ionic'])
	.controller('Ctrl', function ($scope, $http) {
	var page = 1;
	$scope.commits = [];
	$scope.more = true;
	$scope.load = function () {
	$http.get('https://api.github.com/repos/driftyco/ionic/commits?page=' + page)
	.success(function (commits, status, headers) {
	if (headers('link').search('rel="next"') < 0) {
	$scope.more = false;
	}
	angular.forEach(commits, function (commit) {
	$scope.commits.push(commit);
	});
	})
	.finally(function () {
	page++;
	$scope.$broadcast('scroll.infiniteScrollComplete');
	});
	};
	});