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

http://steinbring.net

by Joe Steinbring

HTML

<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>

CSS

/* 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;
}

JavaScript

// 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);
    };
});