├── .gitignore
├── css
    ├── grey.png
    ├── loader.gif
    └── styles.css
├── index.html
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .idea
3 | tmp
4 | 


--------------------------------------------------------------------------------
/css/grey.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjsnell/angularjs-githubapi-example/7c3e66385617541012513cb7603265c0ded67f7a/css/grey.png


--------------------------------------------------------------------------------
/css/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tjsnell/angularjs-githubapi-example/7c3e66385617541012513cb7603265c0ded67f7a/css/loader.gif


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('http://fonts.googleapis.com/css?family=Oldenburg');
  2 | 
  3 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   border: 0;
  7 |   font-size: 100%;
  8 |   font: inherit;
  9 |   vertical-align: baseline;
 10 |   outline: none;
 11 |   -webkit-font-smoothing: antialiased;
 12 |   -webkit-text-size-adjust: 100%;
 13 |   -ms-text-size-adjust: 100%;
 14 |   -webkit-box-sizing: border-box;
 15 |   -moz-box-sizing: border-box;
 16 |   box-sizing: border-box;
 17 | }
 18 | html { overflow-y: scroll; }
 19 | body {
 20 |   background: #fafafa url('grey.png'); /* http://subtlepatterns.com/subtle-grey/ */
 21 |   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 22 |   font-size: 62.5%;
 23 |   line-height: 1;
 24 |   color: #616161;
 25 |   padding: 35px 0;
 26 | }
 27 | 
 28 | br { display: block; line-height: 1.6em; } 
 29 | 
 30 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 31 | ol, ul { list-style: none; }
 32 | 
 33 | input, textarea { 
 34 |   -webkit-font-smoothing: antialiased;
 35 |   -webkit-text-size-adjust: 100%;
 36 |   -ms-text-size-adjust: 100%;
 37 |   -webkit-box-sizing: border-box;
 38 |   -moz-box-sizing: border-box;
 39 |   box-sizing: border-box;
 40 |   outline: none; 
 41 | }
 42 | 
 43 | blockquote, q { quotes: none; }
 44 | blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
 45 | strong, b { font-weight: bold; } 
 46 | 
 47 | table { border-collapse: collapse; border-spacing: 0; }
 48 | img { border: 0; max-width: 100%; }
 49 | 
 50 | h1 { 
 51 |   font-family: 'Oldenburg', Arial, sans-serif;
 52 |   color: #646464;
 53 |   font-size: 4.0em;
 54 |   line-height: 1.6em;
 55 |   margin-bottom: 10px;
 56 | }
 57 | 
 58 | h2 {
 59 |   font-size: 2.8em;
 60 |   line-height: 1.55em;
 61 |   margin-bottom: 4px;
 62 |   color: #888;
 63 | }
 64 | 
 65 | p {
 66 |   font-size: 1.4em;
 67 |   line-height: 1.55em;
 68 |   margin-bottom: 12px;
 69 | }
 70 | 
 71 | a { 
 72 |   color: #8eadd2;
 73 | }
 74 | a:hover {
 75 |   color: #6e91b9;
 76 | }
 77 | 
 78 | 
 79 | /* page structure */
 80 | #w {
 81 |   display: block;
 82 |   width: 800px;
 83 |   margin: 0 auto;
 84 |   background: #fff;
 85 |   padding: 15px 25px;
 86 |   -webkit-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
 87 |   -moz-box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
 88 |   box-shadow: 1px 2px 3px -1px rgba(0,0,0,0.4);
 89 |   -webkit-border-radius: 4px;
 90 |   -moz-border-radius: 4px;
 91 |   border-radius: 4px;
 92 | }
 93 | 
 94 | #ghapidata {
 95 |   display: block;
 96 |   padding: 25px 0;
 97 | }
 98 | 
 99 | #loader {
100 |   display: block;
101 |   width: 200px;
102 |   height: 200px;
103 |   margin: 0 auto;
104 | }
105 | 
106 | 
107 | /* page content styles */
108 | .smallname {
109 |   font-size: 0.75em;
110 |   color: #a9a9a9;
111 |   font-style: italic;
112 | }
113 | 
114 | .avi {
115 |   float: left;
116 |   margin-right: 7px;
117 |   margin-bottom: 7px;
118 | }
119 | .avi img {
120 |   border: 1px solid #ccc;
121 |   padding: 3px;
122 | }
123 | 
124 | .repolist {
125 |   display: block;
126 |   clear: both;
127 |   width: 100%;
128 | }
129 | .repolist ul {
130 |   font-size: 1.2em;
131 | }
132 | .repolist ul li {
133 |   display: block;
134 | }
135 | .repolist ul li a {
136 |   font-weight: bold;
137 |   padding: 6px 9px;
138 |   display: block;
139 |   float: left;
140 |   margin-right: 10px;
141 |   margin-bottom: 10px;
142 |   text-decoration: none;
143 |   border: 1px solid #356492;
144 |   -webkit-border-radius: 3px;
145 |   -moz-border-radius: 3px;
146 |   border-radius: 3px;
147 |   color: #fff;
148 |   background-color: #3673af;
149 |   background-image: -webkit-gradient(linear, left top, left bottom, from(#5597d8), to(#3673af));
150 |   background-image: -webkit-linear-gradient(top, #5597d8, #3673af);
151 |   background-image: -moz-linear-gradient(top, #5597d8, #3673af);
152 |   background-image: -ms-linear-gradient(top, #5597d8, #3673af);
153 |   background-image: -o-linear-gradient(top, #5597d8, #3673af);
154 |   background-image: linear-gradient(top, #5597d8, #3673af);
155 | }
156 | .repolist ul li a:hover {
157 |   background-color: #396895;
158 |   background-image: -webkit-gradient(linear, left top, left bottom, from(#4b87c2), to(#396895));
159 |   background-image: -webkit-linear-gradient(top, #4b87c2, #396895);
160 |   background-image: -moz-linear-gradient(top, #4b87c2, #396895);
161 |   background-image: -ms-linear-gradient(top, #4b87c2, #396895);
162 |   background-image: -o-linear-gradient(top, #4b87c2, #396895);
163 |   background-image: linear-gradient(top, #4b87c2, #396895);
164 | }
165 | .repolist ul li a:active {
166 |   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
167 |   -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
168 |   box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
169 | }
170 | 
171 | .repolist ul li a span {
172 |   font-family: "Courier New", Courier, "Lucida Typewriter", monospace;
173 |   font-size: 0.9em;
174 | }
175 | 
176 | /* input field */
177 | #ghusername {
178 |   display: block;
179 |   padding: 5px 8px;
180 |   font-size: 1.4em;
181 |   color: #666;
182 |   width: 550px;
183 |   margin-bottom: 15px;
184 | }
185 | 
186 | #ghsubmitbtn {
187 |   display: inline-block;
188 |   padding: 8px 18px;
189 |   font-size: 14px;
190 |   font-weight: bold;
191 |   color: #444;
192 |   text-decoration: none;
193 |   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
194 |   background-color: #eaeaea;
195 |   background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
196 |   background-image: -moz-linear-gradient(#fafafa, #eaeaea);
197 |   background-image: -ms-linear-gradient(top, #fafafa, #eaeaea);
198 |   background-image: -o-linear-gradient(top, #fafafa, #eaeaea);
199 |   background-image: linear-gradient(#fafafa, #eaeaea);
200 |   border-radius: 3px;
201 |   border: 1px solid #ddd;
202 |   border-bottom-color: #c5c5c5;
203 |   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
204 |   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
205 |   box-shadow: 0 1px 3px rgba(0,0,0,0.05);
206 | }
207 | #ghsubmitbtn:hover {
208 |   background-color: #dadada;
209 |   background-image: -webkit-linear-gradient(#eaeaea, #dadada);
210 |   background-image: -moz-linear-gradient(#eaeaea, #dadada);
211 |   background-image: -ms-linear-gradient(top, #eaeaea, #dadada);
212 |   background-image: -o-linear-gradient(top, #eaeaea, #dadada);
213 |   background-image: linear-gradient(#eaeaea, #dadada);
214 |   border-color: #ccc #ccc #b5b5b5;
215 | }
216 | #ghsubmitbtn:active {
217 |   background-color:#dadada;
218 |   background-image: none;
219 |   border-color: #b5b5b5;
220 |   -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
221 |   -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
222 |   box-shadow: inset 0 3px 5px rgba(0,0,0,0.25);
223 | }
224 | 
225 | /* clearfix */
226 | .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
227 | .clearfix { display: inline-block; }
228 |  
229 | html[xmlns] .clearfix { display: block; }
230 | * html .clearfix { height: 1%; }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html ng-app>
 3 | <head>
 4 |    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
 5 |    <meta charset="utf-8">
 6 |    <meta http-equiv="Content-Type" content="text/html">
 7 |    <title>Github API Webapp using AngularJS - Not So Clever Demo</title>
 8 |    <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
 9 | </head>
10 | 
11 | <body ng-controller="GitHubCtrl">
12 | 
13 | <div id="w">
14 |    <div>
15 |       <h1>Simple Github API Webapp</h1>
16 | 
17 |       <p>Enter a single Github username below and click the button to display profile info.</p>
18 | 
19 |       <input type="text" id="ghusername" ng-model="username" placeholder="Github username...">
20 |       <a href="#" id="ghsubmitbtn" ng-click="getGitInfo()">Pull User Data</a>
21 | 
22 |       <div id="ghapidata" class="clearfix"></div>
23 |    </div>
24 |    <div ng-show="userNotFound">
25 |       <h2>No User Info Found</h2>
26 |    </div>
27 |    <div ng-show="loaded">
28 | 
29 |       <h2> {{user.name}}
30 |          <span class="smallname">(@<a href="{{user.html_url}}" target="_blank"> {{user.login}} </a>)</span>
31 |       </h2>
32 | 
33 |       <div class="ghcontent">
34 |          <div class="avi">
35 |             <a href="{{ user.html_url }}" target="_blank">
36 |                <img src="{{ user.avatar_url }}" width="80" height="80" alt="{{ user.login }}"></a>
37 |          </div>
38 |          Followers: {{ user.followers }} - Following: {{ user.following }}<br>Repos: {{ user.public_repos }}</p>
39 |       </div>
40 | 
41 |       <div class="repolist clearfix">
42 |          <p ng-hide="reposFound">No repos!</p>
43 | 
44 |          <div ng-show="reposFound">
45 |             <p><strong>Repos List:</strong></p>
46 |             <ul ng-repeat="repo in repos">
47 |                <li><a href="{{repo.html_url}}" target="_blank"> {{repo.name}} </a></li>
48 |             </ul>
49 |          </div>
50 |       </div>
51 |    </div>
52 |    <a href="http://code.notsoclever.cc/simple-github-api-webapp-angularjs-style/">http://code.notsoclever.cc/simple-github-api-webapp-angularjs-style/</a>
53 | </div>
54 | 
55 | 
56 | <script>
57 |    function GitHubCtrl($scope, $http) {
58 |       $scope.getGitInfo = function () {
59 |          $scope.userNotFound = false;
60 |          $scope.loaded = false;
61 | 
62 |          $http.get("https://api.github.com/users/" + $scope.username)
63 |                .success(function (data) {
64 |                   if (data.name == "") data.name = data.login;
65 |                   $scope.user = data;
66 |                   $scope.loaded = true;
67 |                })
68 |                .error(function () {
69 |                   $scope.userNotFound = true;
70 |                });
71 |          $http.get("https://api.github.com/users/" + $scope.username + "/repos").success(function (data) {
72 |             $scope.repos = data;
73 |             $scope.reposFound = data.length > 0;
74 |          });
75 |       }
76 |    }
77 | </script>
78 | 
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | AngularJS example calling the GitHub REST API
2 | ---------------------------------------------
3 | 
4 | http://code.notsoclever.cc/simple-github-api-webapp-angularjs-style/
5 | 
6 | Live demo:
7 | 
8 | http://examples.notsoclever.cc/angular_github/#
9 | 


--------------------------------------------------------------------------------