Look at all the Comments

index.html

    <div class="container" 
         ng-app="github-comments"
         ng-controller="MainController as app">
      <header>
        <form name="commentForm" ng-submit="app.post(text, commentForm)">
          <fieldset class="form-group">
            <label>What's on your mind?</label>
            <textarea rows="3" class="form-control" required
            	ng-model="text"
            
            	ng-disabled="!app.user.username"></textarea>
          </fieldset>
          <fieldset class="form-group" ng-if="app.user.username">
            <button type="submit" class="btn btn-primary pull-right">
              POST as {{app.user.username}}
            </button>
          </fieldset>
        </form>
        <form name="loginForm" ng-submit="app.login(token, loginForm)">
          <fieldset class="form-group" ng-if="!app.user.username">
            <button class="btn btn-success" 
                    ng-click="login = true"
                    ng-hide="login">
              <i class="octicon octicon-mark-github"></i>
              Login with Github to Post
            </button>
            <aside class="input-group" ng-show="login"
                <span class="input-group-btn">
                  <button class="btn btn-danger" ng-click="login = false">
                    <i class="octicon octicon-x"></i> Cancel
                  </button>
                </span>
                <input type="text" class="form-control" required
                    ng-model="token">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary">
                    <i class="octicon octicon-check"></i> Login
                  </button>
                </span>
            </aside>
          </fieldset>
        </form>
      </header>
      <section>
        <blockquote ng-repeat="comment in app.comments">
          <p>
          {{comment.body}}
          </p>
          <cite class="author">
            By <a ng-href="{{comment.user.html_url}}"
               rel="author">{{comment.user.login}}</a>
            on <time datetime="{{comment.user.updated_at}}">{{comment.updated_at | date:'short'}}
          </cite>
        </blockquote>
      </section> <!-- class="body" -->
    </div> <!-- .container -->

Look-at-all-the-Comments.markdown

Look at all the Comments

A reference implementation for the students of the FEE 2014 FALL cohort of The Iron Yard Orlando using Angular, Restangular, and the Github API

A Pen by David Rogers on CodePen.

License.

script.js

;(function(){
  angular.module('github-comments', [ 
  	'restangular', 'ngCookies'
  ])
  	.constant('gist', 'c1076be081565dfe0a15')
  	.service('User', function(Restangular, $cookies){
    	return {
        username: $cookies.username,
        oauth_token: $cookies.oauth_token,
        login: function(token){
          return Restangular.one('user').get({ access_token: token })
          	.then((function(user){
            	$cookies.username = this.username = user.login;
            	$cookies.access_token = this.access_token = token;
          	}).bind(this))
          ;
        },
        clear: function(){
          this.username = !delete $cookies.username;
          this.access_token = !delete $cookies.access_token;
        }
      };
  	})
  	.run(function(Restangular, User){
    	Restangular
      	.setBaseUrl('https://api.github.com')
      	// Always inject User credentials...
      	.setDefaultRequestParams('common', { access_token: User.access_token })
  	})
  	.factory('Comments', function(Restangular, gist){
    	return Restangular.service('comments', Restangular.one('gists', gist));
  	})
  	.controller('MainController', function(Comments, User){
    	this.user = User;
  
    	this.comments = Comments.getList().$object;
    
    	this.login = function(token, loginForm){
        loginForm.$valid && User.login(token);
      };
    
    	this.logout = User.clear;
    
    	this.post = function(text, commentForm){
        commentForm.$valid && Comments.post({ body: text})
        	.then((function(comment){
          	this.comments.push(comment);
	        }).bind(this));
      }
		}) // END MainController
  ; // END module(github-comments)
})();

Woot.