Angularjs--ngresource, RESTful APIs use

In this article, the following two scenario use cases are used to explain:

Save/Persist New Data Objects

Updating an existing Data object

The code snippet contains the ANGULARJS code and the spring MVC code so you can get started quickly and easily.

To $resource a service, you need to add a piece of actual code:

Apply the Angular-resource.js file, you can use Google Hosted libraries to do so.

<script src= "//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js" >
</script>
The following code shows you how to introduce the Ngresource module and inject the $resource service when you create the controller:

var HelloApp = angular.module ("HelloApp", [' Ngresource ']);
Helloapp.controller ("Httpcontroller", [' $scope ', ' $resource ', function ($scope, $resource) {
//
Write your actual business code in this ...
//
} ]);

Save/Persist new object (in fact, it is a process passed to the background to store the database)

The following code demonstrates how to use the Post method to submit the user information in a form form (which is part of the controller), and the controller submits the Uers information to the rest URL "/user/new" (which is part of the spring MVC's controller execution).

Angularjs Code

var HelloApp = Angular.module ("HelloApp", [' Ngresource ']);        Helloapp.controller ("Httpcontroller", [' $scope ', ' $resource ', function ($scope, $resource) {$scope. Users = [ {' FirstName ': ' Ajitesh ', ' LastName ': ' Shukla ', ' address ': ' Hyderbad ', ' email ': ' [email protected] '}, {' FirstName ': ' Sumit ', ' LastName ': ' Jha ', ' address ': ' Muzaffarpur ', ' email ': ' [em     Ail protected] '},]; $scope. Saveuser = function () {//Create a Resource object//var User = $resource ('        /user/new '); Call the Save method//(actually with our $http.post (Url,data). Success (function () {}) is the same, just as it encapsulates it) User.save ({firstname: $scope. Firstname,lastname: $scope. Lastname,address: $scope. Address,email: $scope. Email}, function (response) {$scope. Messa      GE = response.message; 

　　

Spring MVC Code

Note that the fields of the user object are consistent with the JSON data. Also make sure that the Jackson bag has been introduced and is working properly. This is the most important step. I recommend referencing this article how to fix 415 unsupported mediatype error to help you implement the previous two steps. (1.Spring to the object, is to follow the field name, such as the FirstName of your Java user object will bind the JSON object's FirstName, so need to be consistent, otherwise the data may be wrong.) 2. Do not get the Jackson bag, then JSON objects and Java objects do not want to change the conversion, it will not work properly)

/Create a new user

@RequestMapping (value = "/user/new", method = requestmethod.post) public @ResponseBody String saveuserrestful (@  Requestbody User user) {////process input parameter code//String response = "{\" message\ ": \" Post with ngresource:the User FirstName: "+ User.getfirstname () + ", LastName:" + user.getlastname () + ", Address:" + user.getaddress () + ", email:" + User.getema Il () + "\"} "; return response;}

　　

Updating a data object that already exists

The following code shows how to submit the form information via the Post method to update the user object, and the request is sent to the server's Rest URL "/user/{id}", as well as the spring MVC method.

Angularjs Code

var HelloApp = angular.module ("HelloApp", [' Ngresource ']); Helloapp.controller ("Httpcontroller", [' $scope ', ' $        Resource ', function ($scope, $resource) {$scope. Users = [{' FirstName ': ' Ajitesh ', ' LastName ': ' Shukla ', ' Address ': ' Hyderbad ', ' email ': ' [email protected] '}, {' FirstName ': ' Sumit ', ' LastName ':                                                                                ' Jha ', ' address ': ' Muzaffarpur ', ' email ': ' [email protected] '},     ]; $scope. UpdateUser = function () {//Create A Resource class object//Var        User = $resource ('/user/:userid ', {userId: ' @id '});        Create an instance of user resource var user = User.get ({userid:25});        Update the new values entered in the form fields//user.id = 25;        User.firstname = $scope. FirstName;        User.lastname = $scope. LastName; User.address = $scope. Address;        User.email = $scope. email; Call ' $ ' prefixed action Menthod to post ("save")//user $save (function (response) {$scope. Me        Ssage = Response.message;        }); Push the new objects in the $scope. Users//$scope. Users.push ({' FirstName ': $scope. F        Irstname, ' LastName ': $scope. LastName, ' address ': $scope. Address, ' email ': $scope. email});        $scope. Firstname= ';        $scope. Lastname= ';        $scope. address= ';    $scope. email= '; }         } ]);

　　

Spring MVC Code

Please note the following points

-The path variable of the use case (that is, "/user/{id}").

-java the user object to match the JSON object (field name, or property name)

-Make sure that the Jackson Pack is introduced and working (make sure that you can convert JSON and Java objects properly in the background)

Update user//    @RequestMapping (value = "/user/{id}", method = Requestmethod.post)    public  @ResponseBody String UpdateUserProfile (@PathVariable ("id") long userId,  @RequestBody User user  )   {            //    //Code Processing the input parameters    //        String response = "{\" message\ ": \" Post with Ngresource-id: "+ string.valueof (userId) + ", FirstName:" + user.getfirstname () + ", LastName:" + user.getlastname () + ", Address:" + user.getaddress ( + ", Email:" + user.getemail () + "\"} ";    return response;}

　　

Angularjs--ngresource, RESTful APIs use