<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/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 countdouwnInterval = null;
var startCountdown = function() {
countdouwnInterval = $interval(decrementCountdown, 1000, $scope.countdown);
}
$scope.search = function(user) {
if (countdouwnInterval) {
$interval.cancel(countdouwnInterval);
$scope.countdown = null;
}
$location.path("/user/" + user);
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
};
app.controller("MainController", MainController);
//app.controller("MainController", ["$scope", "$http", "$interval", MainController]);
}());
/* Styles go here */
<div>
<h2>{{user.name}}</h2>
{{ error }}
<img ng-src="http://www.gravatar.com/avatar/{{user.gravatar_id}}" title="{{user.name}}">Order:
<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><a href="#/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a></td>
<td>{{repo.stargazers_count | number}}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
<a href="#/main">Back to search</a>
(function() {
var github = function($http) {
var getUser = function(username) {
return $http.get('https://api.github.com/users/' + username)
.then(parseData);
};
var getRepos = function(user) {
return $http.get(user.repos_url)
.then(parseData);
};
var getRepoDetails = function (username, reponame) {
var repoUrl = 'https://api.github.com/repos/' + username + "/" + reponame;
var repo;
return $http.get(repoUrl)
.then(function (response) {
repo = response.data;
return $http.get(repoUrl + "/collaborators");
})
.then(function (response) {
repo.collaborators = response.data;
return repo;
});
}
var getRepo = function(username, reponame) {
return $http.get('https://api.github.com/repos/' + username + "/" + reponame)
.then(parseData);
};
var getCollaborators = function(username, reponame) {
return $http.get('https://api.github.com/repos/' + username + "/" + reponame + "/collaborators")
.then(parseData);
};
var parseData = function(response) {
return response.data;
}
return {
getUser: getUser,
getRepos: getRepos,
getRepo: getRepo,
getCollaborators: getCollaborators,
getRepoDetails: getRepoDetails
};
};
var module = angular.module("githubViewer");
module.factory("github", github);
}());
(function() {
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="" placeholder="Username to find" ng-model="username" />
<input type="submit" value="Search" />
</form>
</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 = "-stargazers_count";
github.getUser($scope.username).then(onUserComplete, onError);
};
app.controller("UserController", UserController);
}());
(function () {
var app = angular.module("githubViewer");
var RepoController = function($scope, github, $routeParams) {
var onRepoComplete = function(data) {
$scope.repo = data;
};
var onCollaborators = function(data) {
$scope.collaborators = data;
};
var onError = function(reason) {
$scope.error = "Could not fetch the data.";
};
$scope.username = $routeParams.username;
$scope.reponame = $routeParams.reponame;
//github.getRepo($scope.username, $routeParams.reponame).then(onRepoComplete, onError);
//github.getCollaborators($scope.username, $routeParams.reponame).then(onCollaborators, onError);
github.getRepoDetails($scope.username, $routeParams.reponame).then(onRepoComplete, onError);
};
app.controller("RepoController", RepoController);
}());
<div>
<h2>{{ reponame }}</h2>
<div>
Issues: {{ repo.open_issues_count }}
</div>
<ul>
<li ng-repeat="collaborator in repo.collaborators">
<img ng-src="http://www.gravatar.com/avatar/{{collaborator.gravatar_id}}" title="{{collaborator.login}}">
<a href="#user/{{collaborator.login}}">
{{collaborator.login}}
</a>
</li>
</ul>
<a href="#/main">Back to search</a>
<a href="#/user/{{username}}">Back to {{username}}</a>
</div>