<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="githubViewer">
<head>
<title>AngualrJSWebsite</title>
<link rel="icon" href="http://realfavicongenerator.net/blog/wp-content/uploads/2015/10/demo_favicon.png" type="image/png" sizes="16x16" />
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="myCtrl.js" type="text/javascript"></script>
<script src="github.js" type="text/javascript"></script>
</head>
<body ng-controller="myCtrl">
<h1>{{message}}</h1>
<div>{{error}}</div>
<div>{{countdown}}</div>
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" placeholder="Username to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
<div ng-include=" 'userdetails.html' " ng-show="userinfo"></div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>S No.:</th>
<th>User Name</th>
<th>Type</th>
<th>Avatar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="usr in user">
<td style="vertical-align: middle;">{{usr.id}}.</td>
<td style="vertical-align: middle;">{{usr.login}}</td>
<td style="vertical-align: middle;">{{usr.type}}</td>
<td>
<img ng-src="{{usr.avatar_url}}" title="{{usr.login}}" height="70" width="70" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
var app = angular.module("githubViewer", []);
app.controller("myCtrl", function(
$scope, github, $interval, $log,
$anchorScroll, $location) {
var onUserComplete = function(data) {
$scope.user = data;
}
var onRepos = function(data) {
$scope.repos = data;
};
var onError = function(reason) {
$scope.error = "Sorry Could not fetch the User :-(";
}
github.getAllUser().then(onUserComplete, onError);
var decrementCount = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdowninterval = null;
var startCountdown = function() {
countdowninterval = $interval(decrementCount, 1000, $scope.countdown);
}
$scope.search = function(username) {
$log.info("Searching for" + username);
github.getUser(username).then(function(data) {
$scope.userinfo = data;
github.getRepos($scope.userinfo).then(onRepos, onError);
$location.hash("userDetails");
$anchorScroll();
if (countdowninterval) {
$interval.cancel(countdowninterval);
$scope.countdown = null;
}
});
};
$scope.username = "josh";
$scope.message = "GitHub Viewer";
$scope.countdown = 5;
startCountdown();
});
/* Styles go here */
In this Plunk I've created a $http .get service and
used api.GitHub.com to retrieve the data of a GitHub user
(function() {
var github = function($http) {
var getUser = function(username) {
return $http.get("https://api.github.com/users/" + username)
.then(function(response) {
return response.data;
});
};
var getRepos = function(userinfo) {
return $http.get(userinfo.repos_url)
.then(function(response) {
return response.data;
});
};
var getAllUser = function() {
return $http.get("https://api.github.com/users?since=135") //you can find these user at "https://api.github.com/users" adddress
.then(function(response) {
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos,
getAllUser: getAllUser
};
};
var module = angular.module("githubViewer");
module.factory("github", github);
}());
<div id="userDetails">
User Name: {{userinfo.name}}, Loacation: {{userinfo.location}}
<br>
<img ng-src="{{userinfo.avatar_url}}" title="{{userinfo.name}}" style="height:90px;width:90px;"> Order Repository By:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>{{repo.name}}</td>
<td>{{repo.stargazers_count}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
(function(){
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider){
});
}());