AngularJS ——ngResource、RESTful APIs 使用

標籤：

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

儲存/持久化 新的資料對象

更新存在的資料對象

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

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

應用angular-resource.js檔案，你可以使用Google Hosted Libraries來實現。

<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 ——ngResource、RESTful APIs 使用