<h1 id="Cookbook..Resources...Buzz">Cookbook: Resources - Buzz</h1>
<div class="cookbook--resources---buzz"><p>External resources are URLs that provide JSON data, which are then rendered with the help of
templates. angular has a resource factory that can be used to give names to the URLs and then
attach behavior to them. For example you can use the
<a href="http://code.google.com/apis/buzz/v1/getting_started.html#background-operations|">Google Buzz API</a>
to retrieve Buzz activity and comments.</p>

<h2>Demo Source Code</h2>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-1" source-edit-css="" source-edit-js="script.js-0" source-edit-unit="" source-edit-scenario="scenario.js-2"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-1" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-1">
    
    <div ng-controller="BuzzController">
     <input ng-model="userId"/>
     <button ng-click="fetch()">fetch</button>
     <hr/>
     <div class="buzz" ng-repeat="item in activities.data.items">
      <h1 style="font-size: 15px;">
       <img ng-src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
       <a ng-href="{{item.actor.profileUrl}}">{{item.actor.name}}</a>
       <a href ng-click="expandReplies(item)" style="float: right;">
        Expand replies: {{item.links.replies[0].count}}
       </a>
      </h2>
      {{item.object.content | html}}
      <div class="reply" ng-repeat="reply in item.replies.data.items" style="margin-left: 20px;">
       <img ng-src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
       <a ng-href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
       {{reply.content | html}}
      </div>
     </div>
    </div>
 </script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-0"></pre>
<script type="text/ng-template" id="script.js-0">
    BuzzController.$inject = ['$resource'];
    function BuzzController($resource) {
     this.userId = 'googlebuzz';
     this.Activity = $resource(
      'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
      {alt: 'json', callback: 'JSON_CALLBACK'},
      { get:     {method: 'JSONP', params: {visibility: '@self'}},
        replies: {method: 'JSONP', params: {visibility: '@self', comments: '@comments'}}
      });
    }
    BuzzController.prototype = {
     fetch: function() {
      this.activities = this.Activity.get({userId:this.userId});
     },
     expandReplies: function(activity) {
      activity.replies = this.Activity.replies({userId: this.userId, activityId: activity.id});
     }
    };
    </script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-2"></pre>
<script type="text/ng-template" id="scenario.js-2">
  xit('fetch buzz and expand', function() {
    element(':button:contains(fetch)').click();
    expect(repeater('div.buzz').count()).toBeGreaterThan(0);
    element('.buzz a:contains(Expand replies):first').click();
    expect(repeater('div.reply').count()).toBeGreaterThan(0);
  });
 </script>
</div>
</div><h2>Demo Source Code</h2>
<div class="well  doc-example-live" ng-embed-app="" ng-set-html="index.html-1" ng-eval-javascript="script.js-0"></div></div>
