我现在使用 Angular 大约 2-3 周，只使用数据绑定(bind)并尝试创建指令。现在我想将一个对象保存到服务器。
领域模型如下所示:
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
最佳答案
我们找到 $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 });
}
};
});
Controller :
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 Action (添加 - MVC 模型绑定(bind)器将完成将 html 参数解析到 VM 中的工作):
[HttpPost]
public ActionResult Customer(Customer customer)
{
// add the customer to the database or whatever
}
View 模型:
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"
HTH
关于asp.net-mvc - 使用 Angular 创建和更新实体的好方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16895037/