aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/cookbook/buzz.ngdoc
blob: 2e82b2d1e1c72fc7ccba385ac3212776c81c42cb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@workInProgress
@ngdoc overview
@name Cookbook: Resources - Buzz
@description

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
{@link http://code.google.com/apis/buzz/v1/getting_started.html#background-operations| Google Buzz API}
to retrieve Buzz activity and comments.

<doc:example>
 <doc:source>
    <script>
    BuzzController.$inject = ['$resource'];
    function BuzzController($resource){
     this.Activity = $resource(
      'https://www.googleapis.com/buzz/v1/activities/:userId/:visibility/:activityId/:comments',
      {alt:'json', callback:'JSON_CALLBACK'},
      { get:     {method:'JSON', params:{visibility:'@self'}},
       replies: {method:'JSON', 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 ng:controller="BuzzController">
     <input name="userId" value="googlebuzz"/>
     <button ng:click="fetch()">fetch</button>
     <hr/>
     <div class="buzz" ng:repeat="item in activities.data.items">
      <h1 style="font-size: 15px;">
       <img src="{{item.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
       <a 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>
      </h1>
      {{item.object.content | html}}
      <div class="reply" ng:repeat="reply in item.replies.data.items" style="margin-left: 20px;">
       <img src="{{reply.actor.thumbnailUrl}}" style="max-height:30px;max-width:30px;"/>
       <a href="{{reply.actor.profileUrl}}">{{reply.actor.name}}</a>:
       {{reply.content | html}}
      </div>
     </div>
    </div>
 </doc:source>
 <doc:scenario>
  it('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);
  });
 </doc:scenario>
</doc:example>