<!DOCTYPE html>
<html ng-app>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GitController">
<h1 class="jumbotron shadow">GitHub Repositories</h1>
<div class="controller">
<input type="search" placeholder="search" class="form-control" ng-model="query">
<table class="table-responsive">
<div align="center" ng-show="loading">
<img src="https://lh4.googleusercontent.com/-_WaWTIbBC-8/UwuO7HxAsvI/AAAAAAAADik/AYDLd7I8AC4/w54-h55-p/ajax-loader-blue.gif" alt="loading..">
</div>
<table class="table table-hover table-condensed shadow" ng-hide="loading">
<thead>
<th></th>
<th>Repository</th>
<th>Description</th>
</thead>
<tfoot>
<th></th>
<th>Repository</th>
<th>Description</th>
</tfoot>
<tbody>
<tr ng-repeat="repo in repos | filter: query">
<td align="center">
<img src="{{repo.owner.avatar_url}}" alt="avatar"
width="80" height="80" class="img-rounded">
<br>
<a ng-href="{{repo.owner.html_url}}" class="link shadow" target="_blank">{{repo.owner.login}}</a>
</td>
<td>
<a ng-href="{{repo.html_url}}" class="label label-warning" target="_blank">{{repo.full_name}}</a>
</td>
<td>
{{repo.description}}
</td>
</tr>
</tbody>
</table>
</table>
</div>
</body>
</html>
// Code goes here
function GitController($scope, $http) {
$scope.repos = {};
$scope.loading = true;
$http({method: 'GET', url: 'https://api.github.com/repositories?since=12000'}).
success(function(data, status) {
$scope.repos = data;
$scope.loading = false;
}).
error(function(data, status) {
$scope.status = 'Error getting repositories ! ' + data;
$scope.loading = false;
});
}
/* Styles go here */
.shadow {text-shadow: 2px 2px 5px silver;}
# AngularJS Ajax Example
**Author**: Jayesh Chandrapal
Copyright © 2014-2015 [www.jayeshcp.com](www.jayeshcp.com) All rights Reserved.
Email: <me@jayeshcp.com>