angularjs springMVC 交互

AngularJS中的$resource使用与Restful资源交互

1.AngularJS中的 $resource

这个服务可以创建一个资源对象，我们可以用它非常方便地同支持RESTful的服务端数据源进行交互，当同支持RESTful的数据模型一起工作时，它就派上用场了。    
 
REST是Representational State Transfer（表征状态转移）的缩写，是服务器用来智能化地提供数据服务的一种方式

1）我们首先需要引入ng-Resource  模块，在angular之后

<script src="js/vendor/angular.js"></script>

<script src="js/vendor/angular-resource.js"></script>

2） 在我们的应用中需要将其当做依赖进行引用 
 
angular.module('myApp', ['ngResource']); 
  
 
3）如何使用？ 
 
$resource服务本身是一个创建资源对象的工厂，返回的$resource对象中包含了同后端服务器进行的交互的高层API. 
  
 
  var User=$resource('/api/users/:userId',{userId:'@id'});

可以把User对象理解成同RESTful的后端服务进行交互的接口。

【HTTP
GET类型的方法】

①GET请求：  get(params,successFn,errrorFn)

不定义具体的参数，get()请求通常被用来获取单个资源。

//GET /api/users 
  
User.get(function(resp){ 
   
//处理成功 
 
  
  
},function(err){ 
   
//处理错误 
 
  
  
}); 
  
  
 
如果参数中传入了具名参数（我们例子中的参数是id），那么get()方法会向包含id的URL发送请求：    
   
//发起一个请求：GET-->/api/users/123 
   
User.get({id:'1234'},function(resp){ 
      
//success 
   
},function(error){ 
      
//fail 
   
}); 
  
  
 
②QUERY 请求：query向指定URL发送一个GET请求，并期望返回一个JSON格式的资源对象集合。 
 
//发起一个请求 
 
User.query(function(users){ 
   
//读取集合中的第一个用户 
   
var user=users[0]; 
 
}); 
  
  
 
query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。

【非HTTP
GET类型的方法】

1. save(params, payload, successFn, errorFn) 
 
save方法向指定URL发送一个POST请求，并用数据体来生成请求体。save()方法用来在服务器上生成一个新的资源。
payload:代表请求发送的数据体

//发送一个请求 with the body {name: 'Ari'}

User.save({},{name:'Ari'},function(resp){ 
 
  
  
},function(error){ 
 
  
  
}); 
  
  
 2.
delete(params, payload, successFn, errorFn)    
 delete方法会向指定URL发送一个DELETE请求，并用数据体来生成请求体。它被用来在服务器上删除一个实例： 
  
  
  
   
// DELETE /api/users 
   
User.delete({}, { 
       
id: '123' 
   
}, function(response) { 
   
// 处理成功的删除响应 
   
}, function(response) { 
   
// 处理非成功的删除响应 
   
}); 
  
  
 
3. remove(params, payload, successFn, errorFn) 
   
remove方法和delete()方法的作用是完全相同的，它存在的意义是因为delete是JavaScript的保留字，在IE浏览器中会导致额外的问题。
  
  
  
   
// 发起一个请求： 
   
// DELETE /api/users 
   
User.remove({}, { 
    
id: '123' 
   
}, function(response) { 
   
// 处理成功的删除响应 
   
}, function(response) { 
   
// 处理非成功的删除响应 
   
});

2.$resource Restful api 与 ngResoruce

$http服务提供了一个非常低级的实现，可以用来发送XHR请求，同时它还为你提供了很大的可控性和灵活性。但是，在大多数情况下，我们需要处理对象，以及封装了特定属性和方法的对象模型，例如一个person对象（带有详细信息），或者一个信用卡对象。

在这些情况下，如果我们能够创建一个JS对象，而且它可以理解并代表这种对象模型，是不是会很棒？如果我们仅仅编辑这个对象的属性，例如保存或者更新，那么这些状态会被持久化到服务端吗？

$resource就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型，它可以描述以下内容：

1.资源在服务端的URL。

2.常用的请求参数类型。

3.一些附加的方法（你可以自动获得get、save、query、remove和delete方法），这些方法为对象模型包装了特定的功能和业务逻辑（例如信用卡对象的charge()方法）。

4.期望获得的响应类型（一个数组或者一个对象）。

5.协议头。

使用Angular所提供的$resource对象，你可以根据各种需求查询服务器；除此之外，你还可以把服务端返回的对象当成已经持久好的数据模型，你可以修改它们，并且可以把它们持久化。

ngResource是一个独立的、可选的模块。为了使用它，需要：

a.在加载的脚本文件中包含angular-resource.js

b.在模块依赖声明中包含ngResource（例如，angular.module('myModule',
['ngResource'])）。

c.在需要的地方使用注入的$resource服务。

在学习如何使用ngResource方法创建资源之前，我们先来看看使用基本的$http服务创建类似的东西需要做些什么事情。对于我们的信用卡资源来说，除了要能够对它进行"change"（收费）操作之外，我们还要能够get（获取）、query（查询）以及save（保存）信用卡。

以下是一种可能的实现：

myAppModule.factory('CreditCard', ['http', function($http) {
 var baseUrl = '/user/123/card';
 return {
 get: function(cardId) {
 return $http.get(baseUrl + '/' + cardId);
},
 save: function(card) {
 var url = card.id ? baseUrl + '/' + card.id : baseUrl;
 return $http.post(url, card);
},
 query: function() {
 return $http.get(baseUrl);
},
 charge: function(card) {
 return $http.post(baseUrl + '/' + card.id, card, {params: {charge: true}});
}
};
}]);

除了这种方式之外，还可以简单地创建一个Angular服务，这个服务将会通过以下方式来描述应用所提供的资源：

 myAppModule.factory('CreditCard', ['$resource', function($resource) {
 return $resource('/usr/:userId/card/:cardId',
 {userId: 123, cardId: '@id'},
 {charge: {method: 'POST', params: {charge: true}, isArray: false});
}]);

现在，只要向我们AngularJS注射器请求一个CreditCard实例，我们就可以获取一个Angular资源，它默认为我们提供了一些基础的方法。下表列出了这些方法的内容以及它们的行为，有了这些信息你就知道应该如何配置服务端了。         下面我们来看一个信用卡的实例，这会让我们的思路更加清晰。

//假设CreditCard服务被注入到了这里
//我们可以从服务端获取一个集合，请求的路径为GET:/user/123/card
 var cards = CreditCard.query();
//我们还可以在回调函数中获取并使用单张信用卡
 CreditCard.get({cardId: 456}, function(card) {
//每个实例都是CreditCard类型
 expect(card instanceof CreditCard).toEqual(true);
 card.name ="J.Smith";
//非GET型的方法被映射到了实例上
 card.$save();

//我们自定义的方法也被映射上去了
 card.$charge({amount:9.99});
//发起一个POST请求：/user/123/card/456?amount=9.99&charge=true
//发送请求时传递的数据为：{id:456, number: '1234', name: 'J.Smith'}
});

这个例子涉及了比较多的内容，对于其中比较重要的内容依次介绍如下：

一.声明

无论是自已定义$resource，还是使用正确的参数来调用注入的$resource函数，操作都非常简单。

$resource函数有一个必需的参数，即可用资源的URL地址，还有两个可选的参数，即默认参数以及你想配置在资源上的额外动作。

请注意URL是参数化的（用:来标识参数。:userId表示userId将会被替换成对应的文本，:cardId表示将会被cardId实参的值替换掉）。如果没有传递参数，对应的标识符会被替换成空字符串。

第二个参数负责处理每一个请求中都会被发送的默认值。在当前这个例子中，我们会把常量123传递给userId。参数cardId更加有趣，“cardId是"@id."”表示的是，如果我们正在使用一个从服务端返回的对象，那么当调用这个对象上的任意方法时（例如调用对象的$save方法），对象上的id属性值就会被赋给cardId参数。

第三个参数是另一个函数，我们希望在自定义的资源上暴露这个函数。

二.自定义方法

调用$resource时，传递的第三个参数是一个可选的。我们希望在自已的资源上暴露的方法。

在前面的例子中，我们指定了一个charge方法，可以通过传递一个对象来配置这个方法，对象中的key就是需要暴露的方法名称。配置项中需要指定的内容有：请求的类型（GET、POST等）、需要作为请求的一部分来传递的参数（在这个例子中就是charge=true），以及返回的结果是否是一个数组（在这个例子中不是）。一旦做完这些事情之后，你就可以自由地调用CreditCard.charge()了

说明：这是一种非常灵活的编码风格，根据上面的代码，对于配置对象{charge: {method: 'POST', params: {charge: true}, isArray: false}，Angular会将其解析成一个方法，然后把这个方法绑定到返回的Restful对象上，上面的配置对象解释之后的方法为：

CreditCard.charge = function(charge, isArray) {
//这里是方法体
}

三.别用回调！（除非你真的需要它们）

第三个需要注意的内容是调用资源时的返回值类型。请再看一下CreditCard.query()调用，我们直接把信用卡对象赋值给了card变量，而并没有在回调函数里面进和赋值。你可能会担心在对服务器进行异步请求的情况下，这种代码能运行吗？

你这种担心是合理的。但事实上，这段代码完全正确，并且能够运行。这里发生的事情是，AngularJS赋给了card对象一个引用（一个对象或者数组，具体是什么需要根据所期望的返回值类型而定），在未来的某个时间上，当对服务器的请求返回来之后，这个引用才会被真正赋值。在些期间，引用对象一直是空的。

对于AngularJS应用来说，最常见的处理流程是：到服务器上获取数据，然后把数据赋值给变量，再把数据显示到模板中。这种快捷方式是非常好用的。在控制器代码中，你唯一要做的事情就是发起对服务端的调用，把返回值赋给正确的作用域变量，然后让模板自动负责渲染它。由于card变量是使用{{}}这种数据绑定技术绑定到视图上的，所以一开始给它一个空值并没有问题，等异步响应返回之后再把结果赋给它。这时候Angular的数据绑定机制会立即发现数据发生了变化，然后会自动通知视图进行刷新。从这里可以看到，使用Angular框架时，对异步调用的很多处理方式已经发生了细微的变化。

如果你有一些需要依赖于返回值才能执行的业务逻辑，那么这种方法就不会奏效。在这种情况下，你就需要使用回调函数，这个回调函数会在调用CreditCard.get()的时候被使用。

四.简化服务端操作

无论你使用返回值的快捷方式，还是使用回调函数，都有一些关于返回对象的注意事项。返回值不是普通的JS对象，而是一个"resource"型的对象。这就意味着，除了服务端返回的数据之外，它上面还带有一些附加的行为（在这个例子中就是$save()和$charge()）。这样可以让你更容易进行服务端调用，例如获取数据、修改数据，以及把修改的内容持久化到服务端（也就是在很多应用中都很常见的CRUD操作）。

五.何时可以使用Angular资源

只有服务端按照RESTful的方式工作的时候，你才可以使用Angular资源。对于信用卡场景，它需要：

1.一个到/user/123/card的GET请求，它会返回用户123的信用卡列表。

2.一个到/user/123/card/15的GET请求，它会返回用户123的ID为15的信用卡。

3.一个到/user/123/card的POST请求，在POST的数据中带有信用卡信息，它将会为用户123的ID创建一张新的信用卡。

4.一个到/user/123/card/15的POST请求，POST的数据中带有信用卡信息，它将会更新用户123的ID为15的信用卡信息。

5.一个到/user/123/card/15的DELETE请求，它将会删除用户123的ID为15的信用卡信息。

我发现一个Angular JS中的关键问题是（以我喜欢的代码工作方式来说）$save方法在ngResource中将只会使用POST沿着有效载荷提交到服务器。新建和更新记录操作都是这样的，对来自服务器的新和旧的对象都是如此。这破坏了 RESTful约定的更新操作应该使用PUT或者PATCH操作。我下面建议的解决方案拓展了现有的ngResource实现，提供了更多的默认选项，同时精简了我们的工作流程。完美的用法（恕我直言）应该像下面这样：

1 2 3 4 5 6 7

var user = new User; user.name = 'Kirk Bushell'; user.$save(); // POST   var user = User.get( { id: 1 }); user.name = 'John smith'; user.$save(); // PUT

如果我们深入ngResource的代码中，这样的需求是可能的，关于怎么样去简化它的实现（这应该是由 Angular 的团队来完成）。不幸的是，它的确意味着如果我们想要同时用POST/PUT来实现保存操作，我们不得不用两个不同的方法（这不是我的风格）。恕我直言，保存就是保存 --- 让你的模块/类 来定义这是什么样的保存（新建或是更新）操作。我们需要做的是用我们自己的默认实现来拓展ngResource提供的 $resource工厂。让我们接着看下去。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

var module = angular.module( 'my.resource', [ 'ngResource' ] );   module.factory( 'Resource', [ '$resource', function( $resource ) {    return function( url, params, methods ) {     var defaults = {       update: { method: 'put', isArray: false },       create: { method: 'post' }     };           methods = angular.extend( defaults, methods );       var resource = $resource( url, params, methods );       resource.prototype.$save = function() {       if ( !this.id ) {         return this.$create();       }       else {         return this.$update();       }     };       return resource;   }; }]);

这里我们定义了一个自定义模块 - my.resource，这个模块可以被注入到其他你想要这个拓展功能的模块中。我们接着以一个依赖为我们的Resource工厂注入$resource，并做一些小魔法，让我们研究下吧。

首先，我们定义了一个新的默认数组。它包括了为resource的更新update和新建create方法 - create方法将会被定义成一个POST请求，update方法将会被定义成一个PUT请求。我们为什么会想要这两个额外的方法？因为它允许我们做更明确的请求，正因如此，我们需要重载$save方法！

我们拓展了任何我们会提供给resource的方法。然后，我们定义我们的新resource和通过重载$save方法拓展它。这个方法会检查id字段是否包含在一个资源对象中，如果有id字段，它将会调用我们定义在default中的$update方法；如果没有id字段，它会调用$create方法，很简单吧！

但是 - 我们怎么在我们自己的资源中使用它呢？小菜一碟。

1 2 3 4 5

var module = angular.module( 'services', [ 'my.resource' ] );   module.factory( 'User', [ 'Resource', function( $resource ) {   return $resource( 'users/:id', { id: '@id' } ); }]);

现在你可以看到 - 我们对待它就像对待其他的资源一样注入，唯一的区别是 - 我们定义了我们的 $resource依赖于我们自己进行拓展ngResource 后的Resource。

3.AngularJS Resource 与 Restful API的交互

REST（表征性状态传输，Representational State Transfer）是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格。RESTful风格的设计不仅具有更好的可读性（Human Readable），而且易于做缓存以及服务器扩展（scalability）。REST风格体现在URL设计上：

• 每个URL对应一个资源
• 对资源的不同操作对应于HTTP的不同方法
• 资源表现形式（representation）通过Accept和Content-Type指定

AngularJS提供了$resourceService来更方便地与RESTful服务器API进行交互，可以方便地定义一个REST资源，而不必手动所有的声明CRUD方法。

参考文档： https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定义在ngResourceModule中，需要在你的HTML中引入这个Module对应的JS，同时在你的APP中添加这样一个依赖：

var app = angular.module('helloApp, ['ngResource']);

然后为资源建立一个Factory：

app.factory('Notes', ['$resource', function($resource) {
    return $resource('/notes/:id');
}]);

当然，你也可以不把$esource的实例放到Factory里，直接在控制器中存起来：var Notes = $resource('/notes/:id)。

CRUD

在你的控制器中就可以对资源进行增删改查了：

app.controller('NotesCtrl', ['$scope', 'Notes', function($scope, Notes) {
    var notes = Notes.query(function(){
        // GET: /notes
        // Response: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}];

        var first = notes[0];
        first.content = 'halo';
        first.$save();
        // POST: /notes/1 {id: 1, content: 'halo'}
        // Response: {id: 1, content: 'halo'}

        second.$delete();
        // DELETE: /notes/2
    });

    var note = new Notes({content: 'xxx'});
    note.$save();
    // POST: /notes
    // Response: {id: 3, content: 'xxx'}
}]);

PUT 操作

$resource提供了五种默认操作：get, query, save, remove, delete。你可以配置一个update操作来完成HTTP PUT：

app.factory('Notes', ['$resource', function($resource) {
    return $resource('/notes/:id', null, {
        update: { method:'PUT' }
    });
}]);

现在，你可以在控制器中获取一个note并更新它：

var note = Notes.get({ id: 3}),
    $id = note.id;

note.content = 'yyy';
Notes.update({ id:$id }, note);
// PUT /notes/3 {id: 3, content: 'yyy'}

现在你的Notes有六种操作了。这些操作有两种调用方式：

1. 通过资源类调用，例如：Notes.update({id: xxx})；
2. 通过资源实例调用，例如：note.$update()，此时操作名需加前缀$。

具体的调用参数可参考文档：

HTTP GET "class" actions: Resource.action([parameters], [success], [error])

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

其中，success参数为(value, responseHeaders)，error参数为(httpResponse)。

属性/URL映射

上述例子中，我们看到note对象的id属性会映射到URL中的:id（/notes/:id）。如果你的业务更加复杂，可以手动配置这个映射关系。例如：

var Notes = $resouce('/users/:userId/notes/:noteId', {
    noteId: '@id',
    userId: '@owner'
}

将会读取note的owner和id属性来生成URL，比如删除note时：

// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /users/alice/notes/123

在构造$resource时，多于的属性映射会成为URL Query。例如：

var Notes = $resouce('/notes/:id', {
    id: '@id',
    user: '@owner'
});
// note === {id: 123, owner: 'alice', content: 'hello'}
note.$delete();
// DELETE: /notes/123?user=alice

REST操作的声明和调用中，多于的属性会成为URL Query。例如：

var Notes = $resouce('/notes/:id', {id: '@id'}, {
    update: {method: 'PUT', operator: 'bob'}
});
// note === {id: 123, content: 'hello'}
note.$update({trusted: true});
// PUT: /notes/123?operator=bob&trusted=true {id: 123, content: 'hello'}

响应转换

有时基于既定的后台设计，无法提供完全RESTful的API，比如/notes返回的是一个分页器对象，而非数组。此时，我们仍然可以使用$resource，但需要设置响应转换回调。例如：

var Notes = $resouce('/notes/:id', null, {
    pager: {
        method: 'GET',
        transformResponse: function(data, headers){
            // Server respond:
            // data = {currentPage: 1,
            //     totalPage: 20,
            //     pageSize: 2,
            //     content: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]}
            var pager = JSON.parse(data);
            return pager.content;
        }
    }
});
var notes = Notes.query(function(){
    // GET: /notes
    // notes === [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]
});

类似响应重写，你还可以设置请求转换transformRequest。

虽然$resource的设计可以支持绝大多数的URL和内容表示设计，但如果你发现$resource的使用过程极其复杂，那可能是你的服务器API并不满足RESTful风格。

---

摘自： http://harttle.com/2015/06/05/angular-resource.html

4.AngularJS  使用 ngResource、Restful API 和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等）。因此，在其实例上，就可以使用"$"作为前缀直接调用这些方法。具体的例子如下所示。

kimmking 翻译于 1年前 0人顶   顶 翻译的不错哦!

这篇文章里，用以下两个情景用例来解释：

• 保存/持久化
  新的数据对象

• 更新存在的数据对象

代码片段包含了AngularJs代码和Spring
MVC代码，以能够让你简单快速的上手。

想要$resource
服务工作，需要添加一段实际代码：

应用angular-resource.js文件，你可以使用Google
Hosted Libraries来实现。

下面采用的代码是最新的angularJs版本。（下面就是引入服务的代码）

?

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

下面的代码告诉你如何在创建控制器时引入ngResource模块和注入$resource服务：

?

1 2 3 4 5 6

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的控制器执行)。

神棍局王某
翻译于
1年前

0人顶

 

顶 翻译的不错哦!

AngularJS代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

var helloApp = angular.module("helloApp", [ 'ngResource' ]); helloApp.controller("HttpController", [ '$scope', '$resource',     function($scope, $resource) {     $scope.users = [         { 'firstname':'Ajitesh',         'lastname':'Shukla',         'address':'Hyderbad',         'email':'ajitesh101@gmail.com'},         { 'firstname':'Sumit',             'lastname':'Jha',             'address':'Muzaffarpur',             'email':'sumitjha2011@yahoo.com'},                                                                                 ];       $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对象不能想换转化，也就不能正常工作了)

?

1 2 3 4 5 6 7 8 9 10

/ 创建一个新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的方法。

神棍局王某
翻译于
1年前

0人顶

 

顶 翻译的不错哦!

AngularJS代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var helloApp = angular.module("helloApp", [ 'ngResource' ]); helloApp.controller("HttpController", [ '$scope', '$resource', function($scope, $resource) {     $scope.users = [         { 'firstname':'Ajitesh',         'lastname':'Shukla',         'address':'Hyderbad',         'email':'ajitesh101@gmail.com'},         { 'firstname':'Sumit',             'lastname':'Jha',             'address':'Muzaffarpur',             'email':'sumitjha2011@yahoo.com'},                                                                                 ];       $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对象)

?

1 2 3 4 5 6 7 8 9 10

// 更新 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; }

神棍局王某
翻译于
1年前

0人顶

 

顶

 

 

查看原文>> 0

看过本文的人也看了：

• AngularJS知识结构图
• “JavaScript Promises和AngularJS $q ...
• 使用AngularJS的$http服务与服务端进行...
• AngularJS中的Promise
• AngularJS $http 异步后台无法获取请...
• Laravel+Angularjs+D3打造可视化数据,R...

发表评论

 

0个评论

-->

 

我要留言×

技术领域：

提交取消

我要留言×

留言成功，我们将在审核后加至投票列表中！

收藏提示 ×

本条知识内容已成功收藏到对应的知识图谱中了！管理我的知识图谱

你已经自动关注本知识库了哦！

×

取消收藏

确定要取消收藏吗？

确认 取消

提示 x

AngularJS知识库已成功保存至 我的结构图 现在你可以用它来管理自己的知识内容了

 

公司简介|招贤纳士|广告服务|银行汇款帐号|联系方式|版权声明|法律顾问|问题报告|合作伙伴|论坛反馈

网站客服杂志客服微博客服webmaster@csdn.net400-600-2320|北京创新乐知信息技术有限公司 版权所有|江苏乐知网络技术有限公司 提供商务支持

京 ICP 证 09002463 号|Copyright © 1999-2016, CSDN.NET, All Rights Reserved