Meet Angualrjs's Resource service

This period of time the company has a project to use Angularjs, so on the internet began to find learning materials.

At the beginning of a "Angularjs authoritative tutorial", read the 10 chapters, really can't see, can only say that this book for the first contact with JavaScript and Nodejs Novice, write too difficult (example too little)

And then on the internet to find some video tutorials, I look at the Mu class network, anyway novice watching video than reading to be easier to accept more.

After watching the video, I found a small project to practice the practiced hand, project address

Point Me

My understanding of $resource is based on this project.

Angularjs is said to be the most difficult of the JavaScript framework of the hardest one, I just touch js, in fact, but also not very understanding, but have seen a bit of jquery, can only say that Angularjs is indeed more difficult than jquery, Here are the following ANGULARJS programming habits:

• ANGULARJS program is divided into controllers and services, usually all controllers in a folder, such as controller, the service is placed under the server file;
• When there are multiple controllers, and some controllers have a common part, the common part can be a one-way service;

This article mainly explains $resource service:

usage:$resource service can create a resource object that we can easily interact with to support a restful server-side data source, which comes in handy when working with a restful data model.

installation: to use this service, of course, first have to support this service, here said installation, rather than introduction, want to use the official website to download the appropriate library files, and add to the boot interface document file, as follows (below is the jade template example):

Script (src= '//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js ') script (src= '//ajax.googleapis.com/ Ajax/libs/angularjs/1.0.8/angular-resource.min.js ')

How to use:the $resource itself contains 5 commonly used methods (actually 4 methods), and 4 methods do not work the same.

For example, we create a service below that can be found at the project address above:

Angular.module (' pollservices ', [' Ngresource ']).          Factory (' Poll ', function ($resource) {            return $resource (' polls/:p ollid ', {}, {              query: {method: ' GET ', params: {p Ollid: ' Polls '}, isarray:true}}          );

The above defines a service named Pollservices, which has a URL of polls/:pollid (where Pollid is a parameter, which can be omitted if necessary), and this service redefined the method query, which sends a GET request to the server. Equivalent to Get/polls/polls http/1.1 (note that in the query method, the polls is copied to Pollid), and the method returns an array.

Below to receive these methods separately, because I rewrite the project code is not on this computer, so the processing function of the route is not uploaded, you can go to see my upload to GitHub code:

1.get method: Sends a GET request and expects to return a JSON-type response. For example:

function Pollitemctrl ($scope, $routeParams, Poll) {          $scope. Poll = Poll.get ({pollid: $routeParams. pollid});          $scope. Vote = function () {};        }

This is equivalent to sending a GET request to the server: get/polls/specific pollid http/1.1, we only need to use the Get method, $resource will do the GET request for us all the work required. is not very convenient, very useful. Of course, after the backend receives this request, needs to respond, this will write/polls/specific pollid route processing function, the project has.

2.query method: The method is redefined.

function Polllistctrl ($scope, Poll) {          $scope. Polls = Poll.query ();        }

Equivalent to sending a get/polls/polls http/1.1 request to the server, the backend needs to have a handler function for/polls/polls.

3.save method: Sends a POST request to the specified URL and uses the data body to generate the request body.

 $scope. Createpoll = function () {var poll = $scope. Poll;              if (Poll.question.length > 0) {var choicecount = 0;                        for (var i = 0, ln = poll.choices.length; i < ln; i++) {var choice = poll.choices[i]; if (Choice.text.length > 0) {choicecount++}} if (c                       Hoicecount > 1) {var newpoll = new Poll (Poll);                  Newpoll. $save (function (p, resp) {if (!p.error) {$location. Path (' polls ');                  } else {alert (' Could not create poll ');              }                });              } else {alert (' must enter at least-choices ');            }} else {alert (' You must enter a question '); }          };

This regenerates an instance (var newpoll = new Poll (Poll)), so use the $resource method with the $ symbol, such as: Newpoll. $save (function (p, RESP)

The Save method here is equivalent to: Post/polls http/1.1, the backend needs to have a handler function for/polls.

The 4.delete method and the Remove method, these two methods are exactly the same, only the early-morning browser incompatibility caused, and now should not have this problem, so with any can, the role of these two methods is to send a delete request to the server. This is not an example.

　　

Meet Angualrjs's Resource service