<!DOCTYPE html>
<!-- Define the scope of the angular app with the ng-app directive -->
<!-- NOTE: the githubViewer parameter must match the angular.module -->
<!-- definition -->
<html ng-app="githubViewer">
<head>
<!-- Include the latest stable version of Angular -->
<script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<!-- Define the scope of the MainController with the ng-controller directive -->
<body ng-controller="MainController">
<header>
<h1>Github info for {{user.login}}</h1>
<div class="blink_me colorRed">
<h1>{{error}}</h1>
</div>
</header>
<article>
<form name="searchUser" ng-submit="search(username)">
<input type="search" placeholder="Username to find" required ng-model="username" />
<input type="submit" value="Search">
</form>
<div ng-include="'userDetails.html'" ng-show="user">
</div>
</article>
</body>
</html>
/* IIFE to isolate the scope of this function */
(function() {
/* Define the angular module (matches ng-app) */
var app = angular.module("githubViewer", []);
/* Main Controller - controller function definition */
var MainController = function($scope, $http) {
/* onUserComplete - process user data from http request */
var onUserComplete = function(response) {
/* Pull user data from response and put into model as user */
$scope.user = response.data;
/* Read the user repository data */
$http.get($scope.user.repos_url)
.then(onRepos, onError);
/* Read the user gist data */
$http.get("https://api.github.com/users/" + $scope.user.login +
"/gists")
.then(onGists, onError);
/* Read the user followers data */
$http.get($scope.user.followers_url)
.then(onFollowers, onError);
/* Read the user following data */
$http.get("https://api.github.com/users/" + $scope.user.login +
"/following")
.then(onFollowing, onError);
$scope.error = "";
}
/* Process the data from the repos url */
var onRepos = function(response) {
/* Store the repo data in the repos array */
$scope.repos = response.data;
if ($scope.repos.length > 0) {
$scope.reposTableShow = true;
} else {
$scope.reposTableShow = false;
}
}
/* Process the data from the gists url */
var onGists = function(response) {
/* Store the gist data in the gists array */
$scope.gists = response.data;
if ($scope.gists.length > 0) {
$scope.gistsTableShow = true;
} else {
$scope.gistsTableShow = false;
}
}
/* Process the data from the followers url */
var onFollowers = function(response) {
/* Store the followers data in the followers array */
$scope.followers = response.data;
if ($scope.followers.length > 0) {
$scope.followersTableShow = true;
} else {
$scope.followersTableShow = false;
}
}
/* Process the data from the following url */
var onFollowing = function(response) {
/* Store the following data in the following array */
$scope.following = response.data;
if ($scope.following.length > 0) {
$scope.followingTableShow = true;
} else {
$scope.followingTableShow = false;
}
}
/* onError function handles any errors */
/* reading data from the http service */
var onError = function(reason) {
/* Set an error message if there is an error */
$scope.error = "Could not fetch the data!";
}
/* Invoke http user request on submit */
$scope.search = function(username) {
/* Contact github server for user info */
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
/* Put the current search parameter into the search field */
$scope.username = username;
}
/* Define a default username */
$scope.username = "scottnakada";
$scope.search($scope.username);
$scope.repoSortOrder = "-stargazers_count"
}
/* Associate the MainControlller with function */
app.controller("MainController", ["$scope", "$http", MainController]);
}());
/* Styles go here */
.colorRed {
color: red;
}
.blink_me {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
PluralSight Tutorial
Angular JS Controllers
Using $http service with Github
This plunker uses the Angular JS service $http to make a get request from the Github API. This pulls the public information for user scott nakada. This information is then formatted and displayed on the web-page.
<div>
<h2>{{user.name}}</h2>
<img ng-src="{{user.avatar_url}}" title="{{user.name}}" width="50%" />
</div>
<div>
Name: {{user.name}}
</div>
<div ng-show="user.company">
Company: {{user.company}}
</div>
<div ng-show="user.location">
Location: {{user.location}}
</div>
<div>
Public Repos: {{user.public_repos}} Order:
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
<option value="+description">Description</option>
</select>
</div>
<table border="2" ng-show="reposTableShow">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | orderBy:repoSortOrder">
<td>
<a ng-href="{{repo.html_url}}">
<button type="button">{{repo.name}}</button>
</a>
</td>
<td>{{repo.stargazers_count|number}}</td>
<td>{{repo.language}}</td>
<td>{{repo.description}}</td>
</tr>
</tbody>
</table>
<div>
Public Gists: {{user.public_gists}}
</div>
<table border="2" ng-show="gistsTableShow">
<thead>
<tr>
<th>Id/Goto</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="gist in gists">
<td>
<a ng-href="{{gist.html_url}}">
<button type="button">{{gist.id}}</button>
</a>
</td>
<td>{{gist.description}}</td>
</tr>
</tbody>
</table>
<div>
Followers: {{user.followers}}
</div>
<table border="2" ng-show="followersTableShow">
<thead>
<tr>
<th>Icon</th>
<th>Username</th>
<th>Github Page</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="follower in followers">
<td><img ng-src="{{follower.avatar_url}}" width="50px" /></td>
<td>
<button type="button" ng-click="search(follower.login)">
{{follower.login}}
</button>
</td>
<td>
<a ng-href="{{follower.html_url}}">{{follower.login}}</a></td>
</tr>
</tbody>
</table>
<div>
Following: {{user.following}}
</div>
<table border="2" ng-show="followingTableShow">
<thead>
<tr>
<th>Icon</th>
<th>Username</th>
<th>Github Page</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="follow in following">
<td><img ng-src="{{follow.avatar_url}}" width="50px" /></td>
<td>
<button type="button" ng-click="search(follow.login)">
{{follow.login}}
</button>
</td>
<td>
<a ng-href="{{follow.html_url}}">{{follow.login}}</a></td>
</tr>
</tbody>
</table>
<div>
<a ng-href="{{user.html_url}}">
<button type="button">Github Page</button>
</a>
</div>
<div>
<a ng-href="mailto:{{user.email}}">
<button type="button">Send Email</button>
</a>
</div>