<!DOCTYPE html>
<html ng-app="MainApp">
<head>
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="css/style.css" />
<script src="js/site.js"></script>
<script src="js/app.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/MainController.js"></script>
<script src="js/UserController.js"></script>
<script src="js/ContributorsController.js"></script>
<script src="js/github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
/* Styles go here */
.headshot {
max-width: 200px
}
.headshot-sm {
max-width: 100px
}
AngularJs: Get Started
More rputing and location
// MODULES
(function () {
"use strict";
angular.module("MainApp", ["ngRoute"]);
})();
// CONTROLLER : MainController
(function() {
"use strict";
// Create MainController in MainApp
angular.module("MainApp")
.controller("MainController", ["$scope", "$interval", "$location", MainController]);
function MainController($scope, $interval, $location) { //Controller
/* ****************************************************** */
/* Search for user */
/* ****************************************************** */
$scope.search = function(userName){
$scope.error = "";
$scope.user = {};
//Cancel interval
if(countDownInterval) {
$interval.cancel(countDownInterval);
$scope.countdown = null;
}
$location.path("/user/" + userName);
};
/* ****************************************************** */
/* CountDown */
/* ****************************************************** */
var decrementCountDown = function () {
$scope.countdown -= 1;
if($scope.countdown < 1) {
$scope.searchName = $scope.searchName? $scope.searchName : "angular";
$scope.search($scope.searchName);
}
};
var countDownInterval = null; // used to cancell interval is search is already executed
var startCountDown = function() {
countDownInterval = $interval(decrementCountDown, 1000, $scope.countdown);
};
/* ****************************************************** */
/* Initializations */
/* ****************************************************** */
$scope.countdown = 5;
$scope.searchName = "angular";
startCountDown();
}
})();
function changeSortOrder(current, newSort) {
if(!current && !newSort)
return "";
if(!current)
current = newSort;
if(!newSort)
mewSort = current;
var direction = current.slice(0, 1);
var name = current.replace("+", "").replace("-", "");
if (newSort == name && direction == "+")
return "-" + newSort;
else
return "+" + newSort;
}
<div>
<div>{{error}}</div>
<br/>
<div>
<div>Name: {{ user.name }}</div>
<div>Location: {{ user.location }}</div>
<div>
<img src="{{user.avatar_url}}" alt="user.name" class="headshot-sm">
</div>
</div>
<table>
<thead>
<tr>
<th><a href="{{selfPath}}" ng-click="changeRepoSortOrder('name')">Name</a></th>
<th><a href="{{selfPath}}" ng-click="changeRepoSortOrder('stargazers_count')">Stars</a></th>
<th><a href="{{selfPath}}" ng-click="changeRepoSortOrder('language')">Language</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in user.repos | orderBy:repoSortOrder ">
<!--orderBy:'-stargazers_count' -->
<td><a href="#/repo/contributors/{{user.login}}/{{repo.name}}">{{ repo.name }}</a></td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
<div>
<a href="#/main"> Back to search</a>
</div>
</div>
// SERVICE - gitHub
(function () {
"use strict";
angular.module("MainApp")
.service("gitHub", ["$http", gitHub]);
function gitHub($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 getContributors = function (userName, repoName) {
return $http.get("https://api.github.com/repos/" + userName + "/" + repoName + "/contributors")
.then(function (response) {
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos,
getContributors: getContributors
};
}
})();
// ROUTES
(function () {
"use strict";
angular.module("MainApp").config(["$routeProvider", function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username", {
templateUrl: "user.html",
controller: "UserController"
})
.when("/repo/contributors/:username/:reponame", {
templateUrl: "contributors.html",
controller: "ContributorsController"
})
.otherwise({
redirectTo: "/main"
});
}]);
})();
// CONTROLLER - UserController
(function () {
"use strict";
function UserController($scope, gitHub, $routeParams, $location) { //Controller
/* ****************************************************** */
/* User related functions */
/* ****************************************************** */
var onRepos = function (data) {
$scope.user.repos = data;
};
var onError = function (reason) {
$scope.error = "Could not fetch data. Error: " + reason.data.message;
$scope.user = {};
};
var onUserComplete = function (data) {
$scope.user = data;
if ($scope.user.name) {
gitHub.getRepos($scope.user)
.then(onRepos, onError);
} else {
$scope.user = {};
$scope.error = "Invalid User Data";
}
};
/* ****************************************************** */
/* Sort functions */
/* ****************************************************** */
$scope.changeRepoSortOrder = function (orderBy) {
$scope.repoSortOrder = changeSortOrder($scope.repoSortOrder, orderBy);
};
/* ****************************************************** */
/* Contributors */
/* ****************************************************** */
$scope.getContributors = function (repoName) {
if (repoName)
$location.path("/repo/contributors/" + $scope.searchName + "/" + repoName);
};
/* ****************************************************** */
/* Initializations */
/* ****************************************************** */
$scope.repoSortOrder = "-stargazers_count";
$scope.searchName = $routeParams.username;
$scope.selfPath = location.hash;
//Getting user
gitHub.getUser($scope.searchName)
.then(onUserComplete, onerror);
}
// Create Controller in MainApp
angular.module("MainApp")
.controller("UserController", ["$scope", "gitHub", "$routeParams", "$location", UserController]);
})();
<div>
<!-- View -->{{ countdown }}
<form name="searchUser" ng-submit="search(searchName)">
<input type="search" required="" placeholder="Username to find" ng-model="searchName" />
<input type="submit" value="Search" /> <span>{{searchName}}</span> </form>
</div>
<div>
<div>{{error}}</div>
<div ng-repeat="item in contributors "> <!-- | orderBy:'+contributions' -->
<div>{{ item.login }}</div>
<div>{{ item.contributions }}</div>
<div><img src="{{item.avatar_url}}" alt="item.login" class="headshot-sm"></div>
</div>
<div>
<a href="#/main"> Back to search</a>
<a href="#/user/{{ userName }}"> Back to user</a>
</div>
</div>
// CONTROLLER - ContributorsController.js
(function () {
"use strict";
function ContributorsController($scope, gitHub, $routeParams, $location) {
var onSuccess = function (data) {
$scope.contributors = data;
};
var onError = function (reason) {
$scope.error = "Could not fetch data. Error: " + reason.data.message;
};
var init = function () {
$scope.userName = null;
$scope.repoName = null;
$scope.contributors = {};
$scope.error = null;
//Get Contributors
if ($routeParams.username && $routeParams.reponame) {
$scope.userName = $routeParams.username;
$scope.repoName = $routeParams.reponame;
gitHub.getContributors($scope.userName, $scope.repoName)
.then(onSuccess, onError);
}
};
init();
}
//Add Controller to Main App
angular.module("MainApp")
.controller("ContributorsController", ["$scope", "gitHub", "$routeParams", "$location", ContributorsController]);
})();