[Turn]angularjs's $resource

Transferred from: http://blog.csdn.net/violet_day/article/details/17403207

$http

The $http service is based on the $Q service and provides a promise package that accepts a configuration object parameter and returns a Promise object. It also provides 2 methods for defining promise Callbacks: Success and error.

[JavaScript]View Plaincopy

1. $http ({method: "GET", url:"/someurl"}).
2. Success (function (data, status, headers, config) {
3. triggered when an asynchronous request returns a response successfully
4. }). Error (function (data, status, headers, config) {
5. //Triggers when an exception occurs
6. });

Because of the number of common HTTP requests, $http service implements a convenient way to do so, for example:
$http. Get
$http. Post
$http. Put
$http. Delete
$http. Head
$http. Jsonp

The $http automatically adds an HTTP header for each request, and can be configured with $httpprovider.defaults.headers.

$httpProvider. Defaults.headers.common sets the header information that all requests will contain:

Accept:application/json, Text/plain, */*
X-requested-with:xmlhttprequest

$httpProvider. Defaults.headers.post set the default request header for the POST request:

Content-type:application/json

$httpProvider. Defaults.headers.put sets the default request header for put requests:

Content-type:application/json

In addition, for the cache feature of $http, it is recommended to take a look at this article.

So $http the relevant content, first of all.

Now, let's take a look at $resource and note that the service requires us to manually load the Angular-resource.js file ~
The core value of $resource service is that it provides a better user experience for developers to interact with restful style webservices, which encapsulates lower-level $http so that the front-end developers are not required to write large amounts of asynchronous request code.

How to configure $resource service:

[JavaScript]View Plaincopy

1. $resource (url[, paramdefaults][, Actions]);

wr.

String type, where placeholders can appear, placeholders are prefixed with ":", and if the system's domain name has a port number, it needs to be escaped manually:
Http://www.codingcool.com:8080/api should be so incoming:

[JavaScript]View Plaincopy

1. $resource ("Http://www.codingcool.com\\:8080/api");

This situation in the 1.2.0RC1 version of NG does not exist, the port number will be recognized without the need to manually escape ~ ~

Paramdefaults (optional)

Object type, which sets the default value of the parameter, which can be overridden by the actions (the third parameter). If the parameter value you set is a function, the function will be executed each time it gets its value (with a bit of nonsense).

Parameters that are set that do not appear in the URL template (the first parameter) are added as search query, for example:
If the URL template is/codingcool/:author,paramdefaults {author: "Kazaff", Profession: "Geek"}, then the final request URL becomes:
/codingcool/kazaff?profession=geek

If the parameter value starts with "@", its true value will be extracted from the data object, followed by an example.

Actions (optional)

An object type that defines the available methods that the $resource provides, as well as the declaration details and $http.

Here's another look at the return value of $resource:
The type of the return value is an object that contains all the methods that interact with the specified service API (that is, the URL), which by default contains the following default method:

[JavaScript]View Plaincopy

1. { ' get ': {method:' get '},
2. ' Save ': {method:' POST '},
3. ' query ': {method:' GET ', IsArray:true},
4. ' Remove ': {method:' DELETE '},
5. ' Delete ': {method:' delete '}
6. };

These methods call the built-in $http service ~

When the asynchronous request succeeds, the data is retrieved from the server side and encapsulated in an object instance of the $resource service, which can be manipulated directly by the Save,remove,delete method, which encapsulates and provides a simple crud operation, So that developers can feel respected Ah! hehe ~

[JavaScript]View Plaincopy

1. var User = $resource ('/user/:userid ', {userId:' @id '});
2. var user = User.get ({userid:123}, function () {
3. USER.ABC = true;
4. User. $save ();
5. });

Notice "@id" and "$save ()" In the code above, and when you execute $save, User.ID will be sent the request as the value of the UserID when the @ is used.

Encapsulating Ajax in this way not only makes the code more elegant, but also works with Ng's view rendering: The template engine does not render when the data is not returned, and once the asynchronous data acquisition is complete, the template engine's rendering mechanism is automatically triggered to render the data into the view.

Finally, look at a simple example:

Angularjs's $resource [HTML]View Plaincopy

2. <! DOCTYPE HTML>
4. <HTML ng-app="Demo">
6. <head>
8. <Meta charset=utf-8 />
10. <title>ngresource DEMO</title>
12. </head>
14. <body>
16. <div ng-controller="Geeklistctrl">
18. <ul>
20. <li ng-repeat="geek in Geeks">
22. <a href="#" ng-click="show ({{geek.id}})">{{geek.name}}</a>
24. </li>
26. </ul>
28. <div ng-show="user">
30. {{user.msg}}
32. </div>
34. </div>
38. <script src="./src/angular.js"></script>
40. <script src="./src/angular-resource.js"></script>
42. <script type="Text/javascript">
44. var demo = angular.module (' demo ', ["Ngresource"])
46. . Factory (' Geek ', function ($resource) {
48. Return $resource ("Geek/:geekid.json", {}, {
50. Query: {
52. Method: "GET",
54. Params: {geekid: "List"},
56. Isarray:true
58. }
60. });
62. });
66. function Geeklistctrl ($scope, Geek) {
68. $Scope.geeks = geek.query ();
70. $scope.show = function (ID) {
72. $Scope.user = geek.get ({geekid:id});
74. };
76. }
80. function Geekdetailctrl ($scope, $routeParams, Geek) {
82. $Scope.geek = geek.get ({geekid: $routeParams. Geekid}, function (geek) {
84. Console.dir (geek);
86. });
88. }
90. </Script>
92. </body>
94. </html>

Turn from:

[Turn]angularjs's $resource