<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.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 class="container">
<div class="row">
<div class="panel panel-default col-sm-8 col-sm-offset-2">
<h1 class="panel-heading">Github Viewer</h1>
<div class="panel panel-body" ng-view=""></div>
</div>
</div>
</body>
</html>
// Code goes here
(function() {
var myModule = angular.module("MyApp");
myModule.controller("MainController", function($scope, $interval, $location) {
var decrementCountDown = function() {
$scope.countDown--;
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 = "angular";
$scope.countDown = 5;
startCountDown();
});
}());
/* Styles go here */
body {
text-align: center;
}
#countDown {
font-size: 2em;
}
.table>thead>tr>th {
text-align: center;
}
.user-image {
margin-bottom: 10px;
max-width: 200px;
}
<a class = "btn btn-default" href="#/main">Back to Search</a>
<div class="row">
<h2>{{ person.name }}</h2>
<img class="img-thumbnail user-image" ng-src="{{person.avatar_url}}">
</div>
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="+language">Language</option>
<option value="-stargazers_count">Stars</option>
</select>
<div class="row">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Stargazers</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repoData | orderBy:repoSortOrder">
<td>
<a href="#/repo/{{person.login}}/{{repo.name}}">
{{repo.name}}
</a>
</td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
{{ repo.name }}
</table>
</div>
<a class = "btn btn-default" href="#/main">Back to Search</a>
(function() {
var github = function($http) {
var getPerson = function(userName) {
return $http.get("https://api.github.com/users/" + userName)
.then(function(response) {
return response.data;
});
};
var getRepos = function(person) {
return $http.get(person.repos_url)
.then(function(response) {
return response.data;
});
};
var getRepoDetails = function(repoName, userName){
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 + "/contributors");
})
.then(function(response){
repo.contributors = response.data;
return repo;
});
};
return {
getPerson: getPerson,
getRepos: getRepos,
getRepoDetails: getRepoDetails
};
};
var myModule = angular.module("MyApp");
myModule.factory("github", github);
}());
(function(){
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:userName",{
templateUrl: "person-info.html",
controller: "UserController"
})
.when("/repo/:userName/:repoName", {
templateUrl: "repo.html",
controller: "RepoController"
})
.otherwise({redirectTo:"/main"});
});
}());
<div>
<h2 ng-show"!user">
Search for a Github User
</h2>
<form name="searchUser" ng-submit="search(userName)">
<input ng-model="userName" required="" type="text" placeholder="UserName" />
<input type="submit" value="Submit" />
</form>
</div>
// Code goes here
(function() {
var myModule = angular.module("MyApp");
myModule.controller("UserController", function($scope, github, $routeParams) {
var onPersonComplete = function(data) {
$scope.person = data;
github.getRepos($scope.person)
.then(onRepos, onError);
};
var onRepos = function(data) {
$scope.repoData = data;
};
var onError = function(reason) {
$scope.error = "Could not fetch the person";
};
var decrementCountDown = function() {
$scope.countDown--;
if ($scope.countdown < 1) {
$scope.search($scope.userName);
}
};
$scope.userName = $routeParams.userName;
$scope.repoSortOrder = "-stargazers_count";
github.getPerson($scope.userName).then(onPersonComplete, onError);
});
}());
// Code goes here
(function() {
var myModule = angular.module("MyApp");
myModule.controller("RepoController", function($scope, github, $routeParams) {
var repoName = $routeParams.repoName;
var userName = $routeParams.userName;
var onRepoDetails = function(data) {
$scope.repo = data;
};
var onError = function(reason) {
$scope.error = "Could not fetch the person";
};
github.getRepoDetails(repoName, userName).then(onRepoDetails, onError);
});
}());
<div class="btn-group">
<a class = "btn btn-default" href="#/main">Back to Search</a>
<a class = "btn btn-default" href="#/user/{{repo.owner.login}}">Back to {{repo.owner.login}}</a>
</div>
<h2>{{repo.name}}</h2>
<div>
Issues: {{repo.open_issues_count}}
</div>
<div>
<ul>
<li ng-repeat="person in repo.contributors">
<img class="img-thumbnail user-image" ng-src="{{person.avatar_url}}"> {{ person.login }}
</li>
</ul>
</div>
<div class="btn-group">
<a class = "btn btn-default" href="#/main">Back to Search</a>
<a class = "btn btn-default" href="#/user/{{repo.owner.login}}">Back to {{repo.owner.login}}</a>
</div>