带有 Google Cloud Endpoints 的 AngularJS 表单答案

【问题标题】：AngularJS forms with Google Cloud Endpoints带有 Google Cloud Endpoints 的 AngularJS 表单
【发布时间】：2013-07-31 06:25:56
【问题描述】：

我创建了一个 API 后端：

@ApiMethod(name = "create", path = "properties", httpMethod = HttpMethod.POST)
public void create(RealEstatePropertyAPI property, User user)
        throws Exception {
}

使用以下数据模型：

public class RealEstatePropertyAPI {

    private Long id;
    private String name;
    private AddressAPI address;

    public RealEstatePropertyAPI() {
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public AddressAPI getAddress() {
        return address;
    }

    public void setAddress(AddressAPI address) {
        this.address = address;
    }

}

public class AddressAPI {

    private Long id;
    private String street;
    private String city;
    private String state;
    private String zip;
    private String country;

    public AddressAPI() {
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getZip() {
        return zip;
    }

    public void setZip(String zip) {
        this.zip = zip;
    }

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }

}

在API Explorer 中，以下请求有效：

POST http://localhost:8888/_ah/api/realestate/v1/properties

Content-Type:  application/json
X-JavaScript-User-Agent:  Google APIs Explorer

{
 "name": "test",
 "address": {
  "city": "DC"
 }
}

但是当使用Angular JS 客户端时，会创建RealEstatePropertyAPI 实例，但不会填充字段（所有null）。请求是：

[{"jsonrpc":"2.0","id":"gapiRpc","method":"realestate.create","params":{"resource":"{\"name\": \"Test\",\"address\": { \"street\": \"White House\"}}"},"apiVersion":"v1"}]

JS 调用：

    var x = '{"name": "Test","address": { "street": "White House"}}';
    gapi.client.realestate.create({"resource": x}).execute(function(resp) {
        console.log(resp);
    });

【问题讨论】：

标签： google-app-engine angularjs google-cloud-endpoints

【解决方案1】：

我遇到了同样的问题，但从未想出如何解决它。我最终没有将 JS 库用于我的插入方法。相反，我创建了这样的调用：

$http({
        'url': API_ROOT + '/mobilebackend/v1/CloudEntities/insert/private_Note',
        'dataType': 'json',
        'method': 'POST',
        'data': JSON.stringify(data),
        'headers': {
            'Content-Type': 'application/json; charset=utf-8'
        }
}).success(function(resp) {
        next(resp);
}).error(function(error) {
        next(error);
});

我希望我有一个更好的选择，但这就是我迄今为止想出的全部。

【讨论】：

查看我自己的答案。我很想看看它是否适用于您的代码。

【解决方案2】：

我实际上设法使它工作。 property 是表单中使用的 $scope 变量。您必须将property 转换为JSON，即String，然后必须将JSON String 转换回对象。

gapi.client.realestate.create(angular.fromJson(angular.toJson(property))).execute(function(resp) {
console.log(resp);
});

来自表单的输入。

<input type="text" id="inputName" placeholder="Real Estate Name" ng-model="property.name">
<input type="text" id="inputStreet" placeholder="Street Address" ng-model="property.address.street" name="uStreet" required>

【讨论】：