歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據

本文為開發者呈現了一些概念和相關的示例代碼,介紹了用ngResource($resource)服務POST方式提交數據到和服務器端SpringMVC環境下的RESTFul APIs。示例代碼可以在如下頁面找到:http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example。相對於使用$http服務,我更喜歡這種方法的主要理由是ngResource允許你使用抽象方式(例如$resource類),你可以使用它的實例上的處理方法與RESTFul APIs交互。這樣就可以簡單方便地實現RESTFul集成。在$resource類的對象上,可以直接調用處理方法(例如get、save等)。因此,在其實例上,就可以使用"$"作為前綴直接調用這些方法。具體的例子如下所示。

這篇文章裡,用以下兩個情景用例來解釋:

  • 保存/持久化 新的數據對象

  • 更新存在的數據對象

代碼片段包含了AngularJs代碼和Spring MVC代碼,以能夠讓你簡單快速的上手。

想要$resource 服務工作,需要添加一段實際代碼:

應用angular-resource.js文件,你可以使用Google Hosted Libraries來實現。

下面采用的代碼是最新的angularJs版本。(下面就是引入服務的代碼)

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"> </script>

下面的代碼告訴你如何在創建控制器時引入ngResource模塊和注入$resource服務:

var helloApp = angular.module("helloApp", [ 'ngResource' ]); helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) { // // 在這寫你的實際業務代碼... // } ]);

保存/持久化新對象 (其實就是傳給後台存進數據庫的一個過程)

下面的代碼演示了如何使用POST方法提交form表單中的user信息(這部分是由controller來做),controller會把uers信息提交給REST URL “/user/new”(這部分是Spring MVC的控制器執行)。

AngularJS代碼

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.saveUser = function(){ // 創建一個resource對象 // var User = $resource('/user/new'); // 調用save方法 //(其實和我們$http.post(url,data).success(function(){})是一樣一樣的,只是它封裝一下而已) User.save({firstname:$scope.firstname,lastname:$scope.lastname,address:$scope.address,email:$scope.email}, function(response){ $scope.message = response.message; });   }   } ]);

Spring MVC 代碼

請注意User對象的字段要和JSON數據的要一致。同時確保Jackson包已經引入了,並且正常工作了。這是最重要的步驟。我推薦參考這篇文章 how to fix 415 Unsupported Mediatype error 來幫助你實現前面兩個步驟。(1.Spring轉對象的時候,是按照字段名來轉的,比如你的Java的User對象的firstname會綁定Json對象的firstname,所以需要保持一致,否則幫出來的數據可能不對。2.不引人Jackson包,那麼Json對象和Java對象不能想換轉化,也就不能正常工作了)

/ 創建一個新user // @RequestMapping(value = "/user/new", method = RequestMethod.POST) public @ResponseBody String saveUserRestful( @RequestBody User user ) { // // 處理輸入參數的代碼 // String response = "{\"message\":\"Post With ngResource: The user firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+"\"}"; return response; }

更新已存在的數據對象

下面的代碼演示了如何通過POST方法提交表單信息來更新user對象,請求會發送到服務器的REST URL "/user/{id}",也包括Spring MVC的方法。

AngularJS代碼

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.message = response.message; }); // Push the new objects in the $scope.users // $scope.users.push({ 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email }); $scope.firstname=''; $scope.lastname=''; $scope.address=''; $scope.email=''; }   } ]);

Spring MVC 代碼

請注意下面幾點

-用例的路徑變量(就是"/user/{id}"這東西)

-Java的User對象要和Json對象匹配(字段名,或者說是屬性名)

-確保Jackson包引入並且正常工作(確保你後台能正常轉化Json和java對象)

// 更新 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系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved