$resource Data Interaction plug-in

Source: Internet
Author: User


Learning Essentials:
1. $resource 2. $resource 3. Angular resources (see)
4. Angularjs custom directives post-lecture

1$resourceBrief introduction
$resource
$resourceThe core value of the service is: providing developers withRESTfulStyleWebServicesThe more interactive
A good user experience, it encapsulates a lower-level$http, so there is no need for front-end developers to write large numbers of asynchronous
The request code.
RESTfulArchitecture:
(1) Each oneUriRepresents a resource;
(2) between the client and the server, passing on some kind of presentation layer of this resource;
(3) Client through FourHTTPVerbs, operate on server-side resources and implement"Presentation Layer State Transformation"。
RESTfulArchitecture Learn MORE:
Http://www.ruanyifeng.com/blog/2011/09/restful.html
2$resourceThe use
1.IntroducedAngular-resource.min.js
2.Load when defining a moduleNgresource
var app = Angular.module (' app ', ["Ngresource"]);
3.Write code
http://www.thinksaas.cn/group/topic/348581/
http://docs.angularjs.cn/api/ngResource/service/$resource
$resource (URL, [paramdefaults], [Actions], options);
Supported methods:
{
' Get ': {method: ' Get '},
' Save ': {method: ' POST '},
' Query ': {method: ' GET ', isarray:true},
' Remove ': {method: ' DELETE '},
' Delete ': {method: ' delete '}
};
var User = $resource ('/user/:userid ', {userId: ' @id '});
var user = User.get ({userid:123}, function () {
USER.ABC = true;
User. $save ();
});
Back-end support for cross-domain requestsPHPFor example:
Header (' access-control-allow-origin: * ');
3. When you can use Angular resources (see below)
You can use Angular resources only when the server is working in a RESTful way. For credit
Card scene, it requires:
1. A GET request to/user/123/card returns a list of 123 credit cards for the user.
2. A GET request to/USER/123/CARD/15 returns a credit card with ID 15 for user 123.
3. A POST request to/user/123/card, with credit card information in the post data, will
Create a new credit card for user 123 's ID.
4. A POST request to/USER/123/CARD/15, with the credit card information in the post data, will
Update the credit card information for user 123 with ID 15.
5. A delete request to/USER/123/CARD/15, which will delete the user 123 with the ID 15 of the letter
Use card information.
In learning how to useNgresourceMethod before creating a resource, let's take a look at using the basic$http
Services to create something like that need to do something. For our credit card resources, in addition to being able to
enough to make it"Change"(charge) operation, we are also able toGet(GET),Query(check
Consultation) andSave(save) credit card.
Myappmodule.factory (' CreditCard ', [' http ', function ($http) {
var baseUrl = '/user/123/card ';
return {
Get:function (cardId) {
Return $http. Get (BaseUrl + '/' + cardId);
},
Save:function (Card) {
var url = card.id? BASEURL + '/' + card.id:baseUrl;
Return $http. Post (URL, card);
},
Query:function () {
Return $http. Get (BASEURL);
},
Charge:function (Card) {
Return $http. Post (BaseUrl + '/' + card.id, card, {params: {charge:true}});
}
};
}]);
In addition to this approach, you can simply create a Angular service that will be depicted in the following ways
Resources provided by the application:
Myappmodule.factory (' CreditCard ', [' $resource ', function ($resource) {
Return $resource ('/usr/:userid/card/:cardid ',
{userid:123, cardId: ' @id '},
{charge: {method: ' POST ', params: {charge:true}, isarray:false});
}]);

< Span style= "FONT-SIZE:12PT;" > 650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/75/85/wKiom1Y7GPnyvWDlAAGfZLm3Ar4979.jpg "title=" aa.png "alt=" wkiom1y7gpnyvwdlaagfzlm3ar4979.jpg "/>

This article is from the "Wennuanyiran" blog, make sure to keep this source http://dingzhaoqiang.blog.51cto.com/5601059/1710088

$resource Data Interaction plug-in

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.