forked from angular/code.angularjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathangular.service.$resource.html
150 lines (142 loc) · 6.81 KB
/
angular.service.$resource.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<h1>angular.service.$resource</h1>
<fieldset class="workInProgress">
<legend>Work In Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.
</fieldset>
<h2>Description</h2>
<p>Is a factory which creates a resource object which lets you interact with
<a href="http://en.wikipedia.org/wiki/Representational_State_Transfer" target="_blank">RESTful</a>
server-side data sources.
Resource object has action methods which provide high-level behaviors without
the need to interact with the low level $xhr or XMLHttpRequest().</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
// Define CreditCard class
var CreditCard = $resource('/user/:userId/card/:cardId',
{userId:123, cardId:'@id'}, {
charge: {method:'POST', params:{charge:true}}
});
// We can retrieve a collection from the server
var cards = CreditCard.query();
// GET: /user/123/card
// server returns: [ {id:456, number:'1234', name:'Smith'} ];
var card = cards[0];
// each item is an instance of CreditCard
expect(card instanceof CreditCard).toEqual(true);
card.name = "J. Smith";
// non GET methods are mapped onto the instances
card.$save();
// POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'}
// server returns: {id:456, number:'1234', name: 'J. Smith'};
// our custom method is mapped as well.
card.$charge({amount:9.99});
// POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'}
// server returns: {id:456, number:'1234', name: 'J. Smith'};
// we can create an instance as well
var newCard = new CreditCard({number:'0123'});
newCard.name = "Mike Smith";
newCard.$save();
// POST: /user/123/card {number:'0123', name:'Mike Smith'}
// server returns: {id:789, number:'01234', name: 'Mike Smith'};
expect(newCard.id).toEqual(789);
</pre></div><p>The object returned from this function execution is a resource "class" which has "static" method
for each action in the definition.</p>
<p>Calling these methods invoke <code>$xhr</code> on the <code>url</code> template with the given <code>method</code> and <code>params</code>.
When the data is returned from the server then the object is an instance of the resource type and
all of the non-GET methods are available with <code>$</code> prefix. This allows you to easily support CRUD
operations (create, read, update, delete) on server-side data.</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function(){
user.abc = true;
user.$save();
});
</pre></div><div ng:non-bindable><pre class="brush: js; html-script: true;"><code>It's worth noting that the callback for `get`, `query` and other method gets passed in the
response that came from the server, so one could rewrite the above example as:
</code></pre></div><div ng:non-bindable><pre class="brush: js; html-script: true;">
var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u){
u.abc = true;
u.$save();
});
</pre></div>
<h2>Usage</h2>
<tt ng:non-bindable>
angular.service.$resource(url, paramDefaults, actions);
</tt>
<h3>Parameters</h3>
<ul>
<li><tt>url</tt> –
<tt>{string}</tt>
<tt></tt>
– A parameterized URL template with parameters prefixed by <code>:</code> as in
<code>/user/:username</code>.</li>
<li><tt>paramDefaults</tt> –
<tt>{Object=}</tt>
<tt></tt>
– Default values for <code>url</code> parameters. These can be overridden in
<code>actions</code> methods.</li>
<li><tt>actions</tt> –
<tt>{Object.<Object>=}</tt>
<tt></tt>
– Map of actions available for the resource.</p>
<pre><code>Each resource comes preconfigured with `get`, `save`, `query`, `remove`, and `delete` to
mimic the RESTful philosophy.
To create your own actions, pass in a map keyed on action names (e.g. `'charge'`) with
elements consisting of these properties:
- `{string} method`: Request method type. Valid methods are: `GET`, `POST`, `PUT`, `DELETE`,
and [`JSON`](http://en.wikipedia.org/wiki/JSON#JSONP) (also known as JSONP).
- `{Object=} params`: Set of pre-bound parameters for the action.
- `{boolean=} isArray`: If true then the returned object for this action is an array, see the
pre-binding section.
- `{boolean=} verifyCache`: If true then items returned from cache, are double checked by
running the query again and updating the resource asynchroniously.
Each service comes preconfigured with the following overridable actions:
</code></pre><pre>
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
</pre></li>
</ul>
<h3>Returns</h3>
<tt>{Object}</tt> A resource "class".
<h2>Example</h2>
<doc:example>
<doc:source>
<script>
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});
}
};
BuzzController.$inject = ['$resource'];
</script>
<div ng:controller="BuzzController">
<input name="userId" value="googlebuzz"/>
<button ng:click="fetch()">fetch</button>
<hr/>
<div 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 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></doc:scenario>
</doc:example>