<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js@*" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.3.0" src="https://code.angularjs.org/1.3.0/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="MainController.js"></script>
<script src="UserController.js"></script>
<script src="RepoController.js"></script>
<script src="github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
var decrementCountdown = function(){
$scope.countdown -= 1;
if($scope.countdown < 1){
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function(){
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path('/user/' + username);
};
$scope.username = "pioneer903";
$scope.countdown = 5;
startCountdown();
};
app.controller("MainController", MainController);
}());
/* Styles go here */
(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(user){
return $http.get(user.repos_url)
.then(function(response){
return response.data;
});
};
var getRepoDetails = function (username, reponame) {
var repo;
var repoUrl = "https://api.github.com/repos/" + username + "/" + reponame;
return $http.get(repoUrl)
.then(function (response) {
repo = response.data;
return $http.get(repoUrl + '/collaborators');
})
.then(function (reposnse) {
repo.collaborators = response.data;
return repo;
});
};
return {
getUser: getUser,
getRepos: getRepos,
getRepoDetails: getRepoDetails
};
};
var module = angular.module("githubViewer");
module.factory("github", github);
}());
<a href="#/main">Back to main</a>
<div id="userDetails">
<img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">
{{ error }}
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-name">Name DSC</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>
<a href="#/repo/{{user.login}}/{{repo.name}}">
{{repo.name}}
</a>
</td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
(function(){
'use strict';
var app = angular.module('githubViewer', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/main', {
templateUrl: 'main.html',
controller: 'MainController'
})
.when('/user/:username', {
templateUrl: 'user.html',
controller: 'UserController'
})
.when('/repo/:username/:reponame', {
templateUrl: 'repo.html',
controller: 'RepoController'
})
.otherwise({redirectTo: '/main'})
});
})();
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
<div ng-include="'user.html'" ng-show="user"></div>
</div>
(function() {
var app = angular.module("githubViewer");
var UserController = function($scope, github, $routeParams) {
var onUserComplete = function(data) {
$scope.user = data;
github.getRepos($scope.user).then(onRepos, onError);
};
var onRepos = function(data) {
$scope.repos = data;
};
var onError = function(reason) {
$scope.error = "Could not fetch the data.";
};
$scope.username = $routeParams.username;
$scope.repoSortOrder = "-name";
github.getUser($scope.username).then(onUserComplete, onError);
};
app.controller("UserController", UserController);
}());
(function (){
var module = angular.module('githubViewer');
var RepoController = function ($scope, $routeParams, github) {
console.log('RepoController')
var onRepo = function (data) {
$scope.repo = data;
};
var onError = function (reason) {
$scope.error = reason;
};
var reponame = $routeParams.reponame;
var username = $routeParams.username;
github.getRepoDetails(username, reponame)
.then(onRepo, onError);
};
module.controller ("RepoController", RepoController);
})();
<h2>{{repo.name}}</h2>
<div>Issues: {{repo.open_issues_count}}</div>
<div>
<ul>
<li ng-repeat = "user in repo.collaborators">
<img src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" alt="">
{{ user.login }}
</li>
</ul>
</div>
<a href="#/main">Back to Search</a>
<a href="#/user/{{repo.owner.login}}">Back to {{repo.owner.login}}</a>
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
var decrementCountdown = function(){
$scope.countdown -= 1;
if($scope.countdown < 1){
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function(){
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function(username) {
if(countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
$location.path('/user/' + username);
};
$scope.username = "pioneer903";
$scope.countdown = 5;
startCountdown();
};
app.controller("MainController", MainController);
}());
<a href="#/main">Back to main</a>
<div id="userDetails">
<img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">
{{ error }}
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-name">Name DSC</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>
<a href="#/repo/{{user.login}}/{{repo.name}}">
{{repo.name}}
</a>
</td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>