Last active
August 29, 2015 14:15
-
-
Save Usse/34c41408d878a4b1e3df to your computer and use it in GitHub Desktop.
Github viewer V0.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <script data-require="angular.js@1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/cosmo/bootstrap.min.css"> | |
| <link href="style.css" rel="stylesheet" /> | |
| <script src="script.js"></script> | |
| </head> | |
| <body ng-controller="MainController"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <div>{{error}}</div> | |
| <form class="form" name="searchUser" ng-submit="search(username)"> | |
| <input type="search" placeholder="Username to find" ng-model="username"/> | |
| <input type="submit" value="Search"> | |
| </form> | |
| </div> | |
| </div> | |
| <div ng-include="'userdetails.html'" ng-show="user"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var app = angular.module('app', []); | |
| var MainController = function($scope, $http) { | |
| var onUserComplete = function(response) { | |
| $scope.user = response.data; | |
| $http.get($scope.user.repos_url) | |
| .then(onRepos, onError); | |
| }; | |
| var onRepos = function(response) { | |
| $scope.repos = response.data; | |
| }; | |
| var onError = function(response) { | |
| $scope.error = "Could not fetch the data. " + response; | |
| }; | |
| $scope.search = function(username) { | |
| $http.get('https://api.github.com/users/' + username) | |
| .then(onUserComplete, onError); | |
| }; | |
| $scope.username = "Usse"; | |
| $scope.repoSortOrder = "-stargazers_count"; | |
| }; | |
| app.controller('MainController',MainController); | |
| }()); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .row {margin-top:20px;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <div> | |
| <p>Name : {{user.name}}</p> | |
| <p>Location : {{user.location}}</p> | |
| <p>Website : <a href="{{user.blog}}" target="_blank">{{user.blog}}</a> | |
| </p> | |
| <img ng-src="{{user.avatar_url}}" title="{{user.name}}" width="80"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| Order : | |
| <select ng-model="repoSortOrder"> | |
| <option value="+name">Name</option> | |
| <option value="-stargazers_count">Stars</option> | |
| <option value="-watchers_count">Watchers</option> | |
| <option value="+language">Language</option> | |
| </select> | |
| <table class="table table-striped table-hover table-condensed"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Stars</th> | |
| <th>Watchers</th> | |
| <th>Language</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="repo in repos | orderBy:repoSortOrder"> | |
| <td>{{repo.name}}</td> | |
| <td>{{repo.stargazers_count | number}}</td> | |
| <td>{{repo.watchers_count | number}}</td> | |
| <td>{{repo.language}}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment