jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

171
lib/angular/docs/partials/api/ngResource.$resource.html Normal file → Executable file
View file

@ -1,60 +1,51 @@
<h1><code ng:non-bindable="">$resource</code>
<span class="hint">(service in module <code ng:non-bindable="">ngResource</code>
)</span>
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ngResource/resource.js#L11" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngResource/resource.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$resource</code>
<div><span class="hint">service in module <code ng:non-bindable="">ngResource</code>
</span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ngResource/resource.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>A factory which creates a resource object that lets you interact with
<div><h2 id="Description">Description</h2>
<div class="description"><div class="ngresource-resource-page"><p>A factory which creates a resource object that lets you interact with
<a href="http://en.wikipedia.org/wiki/Representational_State_Transfer">RESTful</a> server-side data sources.</p>
<p>The returned resource object has action methods which provide high-level behaviors without
the need to interact with the low level <a href="api/ng.$http"><code>$http</code></a> service.</p>
<h3>Installation</h3>
<p>To use $resource make sure you have included the <code>angular-resource.js</code> that comes in Angular
package. You also can find this stuff in <a href="http://code.angularjs.org/">code.angularjs.org</a>.
Finally load the module in your application:</p>
<pre><code> angular.module('app', ['ngResource']);
</code></pre>
<p>and you ready to get started!</p></div>
<p>To use $resource make sure you have included the <code>angular-resource.js</code> that comes in Angular
package. You can also find this file on Google CDN, bower as well as at
<a href="http://code.angularjs.org/">code.angularjs.org</a>.</p>
<p>Finally load the module in your application:</p>
<pre><code> angular.module(&#39;app&#39;, [&#39;ngResource&#39;]);</code></pre>
<p>and you are ready to get started!</p>
</div></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$http">$http</a></code>
</li>
</ul>
<h2 id="Usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$resource(url[, paramDefaults][, actions]);</pre>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">url – {string} – </code>
<p>A parametrized URL template with parameters prefixed by <code>:</code> as in
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>url</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ngresource-resource-page"><p>A parametrized URL template with parameters prefixed by <code>:</code> as in
<code>/user/:username</code>. If you are using a URL with a port number (e.g.
<code>http://example.com:8080/api</code>), you'll need to escape the colon character before the port
number, like this: <code>$resource('http://example.com\\:8080/api')</code>.</p></li>
<li><code ng:non-bindable="">paramDefaults<i>(optional)</i> – {Object=} – </code>
<p>Default values for <code>url</code> parameters. These can be overridden in
<code>http://example.com:8080/api</code>), it will be respected.</p>
<p>If you are using a url with a suffix, just add the suffix, like this:
<code>$resource(&#39;http://example.com/resource.json&#39;)</code> or <code>$resource(&#39;http://example.com/:id.json&#39;)
or even</code>$resource(&#39;<a href="http://example.com/resource/:resource_id.:format&#39;)`">http://example.com/resource/:resource_id.:format&#39;)`</a>
If the parameter before the suffix is empty, :resource_id in this case, then the <code>/.</code> will be
collapsed down to a single <code>.</code>. If you need this sequence to appear and not collapse then you
can escape it with <code>/\.</code>.</p>
</div></td></tr><tr><td>paramDefaults <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ngresource-resource-page"><p>Default values for <code>url</code> parameters. These can be overridden in
<code>actions</code> methods. If any of the parameter value is a function, it will be executed every time
when a param value needs to be obtained for a request (unless the param was overridden).</p>
<p>Each key value in the parameter object is first bound to url template if present and then any
excess keys are appended to the url search query after the <code>?</code>.</p>
<p>Given a template <code>/path/:verb</code> and parameter <code>{verb:'greet', salutation:'Hello'}</code> results in
<p>Given a template <code>/path/:verb</code> and parameter <code>{verb:&#39;greet&#39;, salutation:&#39;Hello&#39;}</code> results in
URL <code>/path/greet?salutation=Hello</code>.</p>
<p>If the parameter value is prefixed with <code>@</code> then the value of that parameter is extracted from
the data object (useful for non-GET operations).</p></li>
<li><code ng:non-bindable="">actions<i>(optional)</i> – {Object.&lt;Object&gt;=} – </code>
<p>Hash with declaration of custom action that should extend the
the data object (useful for non-GET operations).</p>
</div></td></tr><tr><td>actions <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">Object.&lt;Object&gt;</a></td><td><div class="ngresource-resource-page"><p>Hash with declaration of custom action that should extend the
default set of resource actions. The declaration should be created in the format of <a href="api/ng.$http#Parameters"><code>$http.config</code></a>:</p>
<pre><code>{action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...}
</code></pre>
...}</code></pre>
<p>Where:</p>
<ul>
<li><strong><code>action</code></strong> – {string} – The name of action. This name becomes the name of the method on your
resource object.</li>
@ -77,24 +68,22 @@ response body and headers and returns its transformed (typically deserialized) v
GET request, otherwise if a cache instance built with
<a href="api/ng.$cacheFactory"><code>$cacheFactory</code></a>, this cache will be used for
caching.</li>
<li><strong><code>timeout</code></strong> – <code>{number}</code> – timeout in milliseconds.</li>
<li><strong><code>timeout</code></strong> – <code>{number|Promise}</code> – timeout in milliseconds, or <a href="api/ng.$q"><code>promise</code></a> that
should abort the request when resolved.</li>
<li><strong><code>withCredentials</code></strong> - <code>{boolean}</code> - whether to to set the <code>withCredentials</code> flag on the
XHR object. See <a href="https://developer.mozilla.org/en/http_access_control#section_5">requests with credentials</a> for more information.</li>
<li><strong><code>responseType</code></strong> - <code>{string}</code> - see <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#responseType">requestType</a>.</li>
</ul></li>
<li><strong><code>interceptor</code></strong> - <code>{Object=}</code> - The interceptor object has two optional methods -
<code>response</code> and <code>responseError</code>. Both <code>response</code> and <code>responseError</code> interceptors get called
with <code>http response</code> object. See <a href="api/ng.$http"><code>$http interceptors</code></a>.</li>
</ul>
<h3 id="Returns">Returns</h3>
<div class="returns"><code ng:non-bindable="">{Object}</code>
– <p>A resource "class" object with methods for the default set of resource actions
</div></td></tr></tbody></table><h4 id="returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-object">Object</a></td><td><div class="ngresource-resource-page"><p>A resource &quot;class&quot; object with methods for the default set of resource actions
optionally extended with custom <code>actions</code>. The default set contains these actions:</p>
<pre><code>{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'} };
</code></pre>
<pre><code>{ &#39;get&#39;: {method:&#39;GET&#39;},
&#39;save&#39;: {method:&#39;POST&#39;},
&#39;query&#39;: {method:&#39;GET&#39;, isArray:true},
&#39;remove&#39;: {method:&#39;DELETE&#39;},
&#39;delete&#39;: {method:&#39;DELETE&#39;} };</code></pre>
<p>Calling these methods invoke an <a href="api/ng.$http"><code>ng.$http</code></a> with the specified http method,
destination and parameters. When the data is returned from the server then the object is an
instance of the resource class. The actions <code>save</code>, <code>remove</code> and <code>delete</code> are available on it
@ -107,7 +96,6 @@ read, update, delete) on server-side data like this:
user.$save();
});
</pre>
<p>It is important to realize that invoking a $resource object method immediately returns an
empty reference (object or array depending on <code>isArray</code>). Once the data is returned from the
server the existing reference is populated with the actual data. This is a useful trick since
@ -115,38 +103,35 @@ usually the resource is assigned to a model which is then rendered by the view.
object results in no rendering, once the data arrives from the server then the object is
populated with the data and the view automatically re-renders itself showing the new data. This
means that in most case one never has to write a callback function for the action methods.</p>
<p>The action methods on the class object or instance object can be invoked with the following
parameters:</p>
<ul>
<li>HTTP GET "class" actions: <code>Resource.action([parameters], [success], [error])</code></li>
<li>non-GET "class" actions: <code>Resource.action([parameters], postData, [success], [error])</code></li>
<li>HTTP GET &quot;class&quot; actions: <code>Resource.action([parameters], [success], [error])</code></li>
<li>non-GET &quot;class&quot; actions: <code>Resource.action([parameters], postData, [success], [error])</code></li>
<li>non-GET instance actions: <code>instance.$action([parameters], [success], [error])</code></li>
</ul>
<p>Success callback is called with (value, responseHeaders) arguments. Error callback is called
with (httpResponse) argument.</p>
<p>Class actions return empty instance (with additional properties below).
Instance actions return promise of the action.</p>
<p>The Resource instances and collection have these additional properties:</p>
<ul>
<li><p><code>$then</code>: the <code>then</code> method of a <a href="api/ng.$q"><code>promise</code></a> derived from the underlying
<a href="api/ng.$http"><code>$http</code></a> call.</p>
<p>The success callback for the <code>$then</code> method will be resolved if the underlying <code>$http</code> requests
succeeds.</p>
<p>The success callback is called with a single object which is the <a href="api/ng.$http"><code>http response</code></a>
object extended with a new property <code>resource</code>. This <code>resource</code> property is a reference to the
result of the resource action — resource object or array of resources.</p>
<p>The error callback is called with the <a href="api/ng.$http"><code>http response</code></a> object when an http
error occurs.</p></li>
<li><p><code>$resolved</code>: true if the promise has been resolved (either with success or rejection);
Knowing if the Resource has been resolved is useful in data-binding.</p></li>
</ul></div>
</div>
<li><p><code>$promise</code>: the <a href="api/ng.$q"><code>promise</code></a> of the original server interaction that created this
instance or collection.</p>
<p>On success, the promise is resolved with the same resource instance or collection object,
updated with data from server. This makes it easy to use in
<a href="api/ngRoute.$routeProvider">resolve section of $routeProvider.when()</a> to defer view rendering
until the resource(s) are loaded.</p>
<p>On failure, the promise is resolved with the <a href="api/ng.$http"><code>http response</code></a> object,
without the <code>resource</code> property.</p>
</li>
<li><p><code>$resolved</code>: <code>true</code> after first server interaction is completed (either with success or rejection),
<code>false</code> before that. Knowing if the Resource has been resolved is useful in data-binding.</p>
</li>
</ul>
</div></td></tr></table></div>
<h2 id="Example">Example</h2>
<div class="example"><h3>Credit card resource</h3>
<div class="example"><div class="ngresource-resource-page"><h3>Credit card resource</h1>
<pre class="prettyprint linenums">
// Define CreditCard class
var CreditCard = $resource('/user/:userId/card/:cardId',
@ -181,28 +166,23 @@ Knowing if the Resource has been resolved is useful in data-binding.</p></li>
// server returns: {id:789, number:'01234', name: 'Mike Smith'};
expect(newCard.id).toEqual(789);
</pre>
<p>The object returned from this function execution is a resource "class" which has "static" method
<p>The object returned from this function execution is a resource &quot;class&quot; which has &quot;static&quot; method
for each action in the definition.</p>
<p>Calling these methods invoke <code>$http</code> on the <code>url</code> template with the given <code>method</code>, <code>params</code> and <code>headers</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>
<pre class="prettyprint linenums">
<p> <pre class="prettyprint linenums">
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
</pre>
<p>It's worth noting that the success callback for <code>get</code>, <code>query</code> and other method gets passed
<p>It&#39;s worth noting that the success callback for <code>get</code>, <code>query</code> and other method gets passed
in the response that came from the server as well as $http header getter function, so one
could rewrite the above example and get access to http headers as:</p>
<pre class="prettyprint linenums">
<p> <pre class="prettyprint linenums">
var User = $resource('/user/:userId', {userId:'@id'});
User.get({userId:123}, function(u, getResponseHeaders){
u.abc = true;
@ -212,15 +192,13 @@ could rewrite the above example and get access to http headers as:</p>
});
});
</pre>
<h3>Buzz client</h3>
<p>Let's look at what a buzz client created with the <code>$resource</code> service looks like:
<h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-224" source-edit-css="" source-edit-js="script.js-223" source-edit-unit="" source-edit-scenario="scenario.js-225"></div>
<h1>Buzz client</h1>
<p> Let&#39;s look at what a buzz client created with the <code>$resource</code> service looks like:
<h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-145" source-edit-css="" source-edit-js="script.js-144" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-146"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-224" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-224">
<pre class="prettyprint linenums" ng-set-text="index.html-145" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-145">
<div ng-controller="BuzzController">
@ -243,8 +221,8 @@ could rewrite the above example and get access to http headers as:</p>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-223"></pre>
<script type="text/ng-template" id="script.js-223">
<pre class="prettyprint linenums" ng-set-text="script.js-144"></pre>
<script type="text/ng-template" id="script.js-144">
function BuzzController($resource) {
this.userId = 'googlebuzz';
this.Activity = $resource(
@ -266,10 +244,11 @@ could rewrite the above example and get access to http headers as:</p>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-225"></pre>
<script type="text/ng-template" id="scenario.js-225">
<pre class="prettyprint linenums" ng-set-text="scenario.js-146"></pre>
<script type="text/ng-template" id="scenario.js-146">
</script>
</div>
</div><h4>Demo</h4>
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-224" ng-eval-javascript="script.js-223"></div></div>
</div><h2>Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-145" ng-eval-javascript="script.js-144"></div>
</div></div>
</div>