3

我现在使用 Angular 大约 2-3 周，并且只使用数据绑定并尝试创建指令。现在我想将一个对象保存到服务器。

域模型如下所示：

public class Customer
{
    public int Id { get; set; }
    public string Code { get; set; }
    public string CompanyName { get; set; }
    public string EmailAddress { get; set; }
    public DateTime BirthDate { get; set; }
    public string BSNNo { get; set; }
    public string IdCardNo { get; set; }
    public bool Deceased { get; set; }
    public Gender Gender { get; set; }
    public Title Title { get; set; } // Title is an enum
    internal bool IsActive { get; set; }

    public PersonName Name { get; set; } // A value object
    public PhoneNumber DayPhone { get; set; } // A value object
    public PhoneNumber OtherPhone { get; set; }

    public virtual Address Address { get; set; } // A value object
    public virtual Address PostallAddress { get; set; }
}

现在我已经创建了一个相应的 HTML 表单，当我提交这个表单时，它将由 Angular 处理。但现在我想知道最好/推荐的方法是保存这个表格。

仅供参考：我们正在使用 ASP.NET MVC 4

4

2 回答 2

7

我们发现$resource是一个很好的方法。$httpBackend服务也允许简单的测试。我们有以下类似的东西，它对我们很有效。如果您想要更多控制权，您可以随时退回到$http服务。

看法

<!DOCTYPE html >

<html ng-app="myApp">
<head>
</head>
<body ng-controller="CustomerController">
    <form name="form" novalidate>
        <input type="text" ng-model="customer.name" required />
        <input type="text" ng-model="customer.address" required />
        <button ng-click="add(customer)">Save</button>
    </form>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/services/customerResource.js"></script>
    <script src="~/Scripts/app/controllers/CustomerController.js"></script>

</body>
</html>

服务：

myApp.factory('customerResource', function($resource){
  var resource = $resource('/data/customer/:id', { id: '@id' }, { 'put' : {method:'PUT' } });

  return {
    getAll : function(){
        return resource.query();
    },
    add : function(customer){
            return resource.save(customer);
    },
    update : function(customer){
            return resource.put({ id: customer._id }, customer);
    },
    remove : function(id){
            return resource.remove( { id: id });
    }
  };
});

控制器：

myApp.controller('CustomerController', function($scope, customerResource) {

  $scope.customer = {};

  $scope.customers = customerResource.getAll();

  $scope.add = function(customer){
    $scope.customers.push(customerResource.add(customer));
  }

  $scope.update = function(customer){
    customerResource.update(customer);
  }

  $scope.remove = function(customer){
    customerResource.remove(customer._id);
    $scope.customers.splice($scope.customers.indexOf(customer), 1);
  }
});

非常基本的测试：

describe('customerResource', function(){
  beforeEach(module('myApp'));

  describe('getAll', function(){

    it('should issue a GET request to /data/customer', inject(function(customerResource, $httpBackend){
      $httpBackend.expectGET('/data/customer').respond([{ level: '5'}]);

      var customers = customerResource.getAll();
      $httpBackend.flush();

      expect(customers[0].level).toBe('5');
  }));

  it('should return an array of custoemrs', inject(function(customerResource, $httpBackend){
    $httpBackend.when('GET', '/data/customer').respond([{ level: '5'}, { level: '6'}]);

    var customers = customerResource.getAll();
    $httpBackend.flush();

    expect(customers[0].level).toBe('5');
    expect(customers[1].level).toBe('6');
  }));
});

MVC 操作（添加 - MVC 模型绑定器将完成将 html 参数解析到 VM 中的工作）：

[HttpPost]
public ActionResult Customer(Customer customer)
{
        // add the customer to the database or whatever
}

视图模型：

public class Customer
{
    public string Name { get; set; }
    public string Address { get; set; }
}

HTTP 请求将类似于：

Request URL:http://mywebsite/data/customer
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en;q=0.8,en-US;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:30
Content-Type:application/json;charset=UTF-8
Host:mywebsite
Origin:http://mywebsite
Pragma:no-cache
Request Payloadview source
  {name:somename, address:someaddress}
  address: "somename"
 name: "someaddress"

高温高压

于 2013-06-03T13:04:13.027 回答
3

试试看一下breeze.js——它包括一些方便的更改跟踪，还具有用于查询OData/WebAPI 服务的.Net Linq 样式语法，其中查询实际上将在服务器端运行。这就像 $resource ，但使用了类固醇。

于 2013-06-03T17:20:52.643 回答