This service can create a resource object that we can easily interact with to support restful service-side data sources, and it comes in handy when working with a restful data model.
Rest is an abbreviation for the representational state Transfer, which is a way for the server to intelligently provide data services
1) We first need to introduce the Ng-resource module, after angular
<script src= "Js/vendor/angular.js" ></script>
<script src= "Js/vendor/angular-resource.js" ></script>
2) We need to refer to it as a dependency in our application
Angular.module (' myApp ', [' Ngresource ']);
3) How to use?
The $resource service itself is a factory that creates a resource object, and the returned $resource object contains a high-level API for interacting with the backend server.
var user= $resource ('/api/users/:userid ', {userId: ' @id '});
The user object can be understood as an interface that interacts with a restful backend service.
First, HTTP get type method
①get Request: Get (PARAMS,SUCCESSFN,ERRRORFN)
A get () request is typically used to obtain a single resource without defining a specific parameter.
Get/api/users
User.get (function (RESP) {
Processing success
},function (Err) {
Handling Errors
});
If a named parameter is passed in the parameter (the parameter in our example is an ID), then the Get () method sends the request to the URL that contains the ID:
Initiate a request: get-->/api/users/123
User.get ({id: ' 1234 '},function (RESP) {
Success
},function (Error) {
Fail
});
②query Request: QUERY sends a GET request to the specified URL and expects to return a collection of resource objects in JSON format.
Initiate a request
User.query (function (users) {
Reads the first user in a collection
var user=users[0];
});
the only difference between the query () and get () methods is that ANGULARJS expects the query () method to return an array.
Ii. Methods for non-HTTP GET types
1. Save (params, payload, SUCCESSFN, ERRORFN)
The Save method sends a POST request to the specified URL and uses the data body to generate the request body. The Save () method is used to generate a new resource on the server. Payload: Represents the data volume sent by the request
Send a request with the body {name: ' Ari '}
User.save ({},{name: ' Ari '},function (resp) {
},function (Error) {
});
2. Delete (params, payload, SUCCESSFN, ERRORFN)
The Delete method sends a delete request to the specified URL and uses the data body to generate the request body. It is used to delete an instance on the server:
Delete/api/users
User.delete ({}, {
ID: ' 123 '
}, function (response) {
Handling a successful Delete response
}, function (response) {
Handling a non-successful delete response
});
3. Remove (params, payload, SUCCESSFN, ERRORFN)
The Remove method and the Delete () method work exactly the same, meaning that the delete is a reserved word for JavaScript and will cause additional problems in IE.
//Initiate a request:
Delete/api/users
User.remove ({}, {
ID: ' 123 '
}, function (response) {
//Processing a successful delete response
}, function (response) {
//handling a non-successful delete response
});
Extended $resource
third, $resource set the object
$resource encapsulation of five common requests, we can also extend the $resource to extend $resource we need to pass in the third parameter, which is an object.
$resource ('/api/users ', {},{ sendemail:{ method: ', URL: ', params:{}, Isarray:boolean, transformrequest: Function or function array transformresponse: function or function array cache: Boolean or Cache object timeout: Numeric or Promise Object withcredentials: Boolean type Responsetype: string, used to set Xmlhttprequestresponsetype property }})
Iv. Custom $resource Services
We can also use $resource services as a basis for custom services.
Angular.module (' testApp ', [' Ngresource ']), factory (' UserService ', [' $resource ', function ($resource) {
Return $resource (url,{},{});
}]);
Example:
v. Application examples in the project
Define ([' {angular}/angular ', ' {angular-sanitize}/angular-sanitize ', ' {w20-ui}/modules/select '], function (Angula R) {' Use strict '; var hubcomponentimport = angular.module (' Hubcomponentimport ', [' ui.select ', ' ngsanitize ']); Hubcomponentimport.controller (' Hubimportcomponentctrl ', [' $scope ', ' $routeParams ', ' $timeout ', ' $resource ', ' $ Location ', function ($scope, $routeParams, $timeout, $resource, $location) {$scope. editcomponent = function () { Initialize parameter $scope. component= {tags:[]}; Use $resource to customize the Post method var components= $resource (' Rest/components/url ', {},{getcomponent: {metho D: ' POST '}}); Receive the page input data and send the request var component= components.getcomponent ({},{url: $scope. Componenturl},function (data) { $scope. Component = data; }); Turn to edit.html page $scope. searchcomponent = ' manage/views/edit.html '; }; }]); return { Angularmodules: [' Hubcomponentimport '};});
Using $resource in Angularjs