Get a user's Google+ Feed, using YQL and AngularJS

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="GPlusApp" ng-controller="GPlusCtrl">
    <label for="UserID">Google+ UserID</label>
    <input type="text" id="UserID" ng-model="UserID">
    <button data-ng-click="refreshPosts()">Fetch Posts</button>
    
    <ul>
    
      <li ng-repeat="post in posts">
        <div class="image" ng-show="post.object.attachments.image.url">
          <a href="{{post.object.attachments.fullImage.url}}"><img ng-src="{{post.object.attachments.image.url}}"></a>
        </div>
        <div class="date">
          <a href="{{post.url}}">
            {{post.published | date:'medium'}}
          </a>
        </div>
        <div class="text" ng-bind-html="post.object.content | unsafe">

        </div>
        <div style="clear:both;"></div>
      </li>
    </ul>
  </body>

</html>

// The module
var GPlusApp = angular.module('GPlusApp', []);

// The controller
GPlusApp.controller('GPlusCtrl', ['$scope', '$http', function ($scope, $http) {
  // You need to specify an APIKey
  APIKey = 'AIzaSyCT-K_4RYY8vSwou7zBvTDIQylvz2riCq8';
  // What user are we looking up?
  $scope.UserID = '+JoeSteinbring';
  
  $scope.refreshPosts = function(){
    // URL Encode that '+'
    EncUserID = $scope.UserID.replace('+','%2B');
    // Define the JSON feed
    jsonFeed = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20google.plus.activities%20where%20key%3D%22"+APIKey+"%22%20and%20activityId%20in%20(select%20items.id%20from%20google.plus.activities.list%20where%20key%3D%22"+APIKey+"%22%20and%20userId%3D%22"+EncUserID+"%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    // Actually fetch the data
    $http.get(jsonFeed).success(function (data) {
      // Define the unique market cities
      $scope.posts = data.query.results.json;
    });
  }
}]);

// Define the 'Unsafe' filter for post text
GPlusApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

/* Styles go here */

.image{
  width:50%;
  float:right;
  margin-bottom:30px;
}

.text{
  width:50%;
  float:left;
  margin-bottom:30px;
}

.date{
  width:50%;
  float:left;
  font-size:10px;
  margin-bottom:20px;
}

ul {
  list-style-type:none;
}

# Get a user's Google+ Feed #
## An experiment in AngularJS ##

***What is this?***  It is an experiment into some of what you can do with AngularJS.  I used YQL to get the user's Google+ feed.

***Who am I?***  I am Joe Steinbring.  I am a coder from Milwaukee, WI.  You can find me at http://steinbring.net.

[YQL Query](http://developer.yahoo.com/yql/console/?q=select%20*%20from%20google.plus.activities%20where%20key%3D%22my_api_key%22%20and%20activityId%20in%20(select%20items.id%20from%20google.plus.activities.list%20where%20key%3D%22my_api_key%22%20and%20userId%3D%22116115719351294422282%22)&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys)

[Sign up for an API Key](https://console.developers.google.com)