Question

我现在使用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

Answer 1

我们发现$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操作（ADD - 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"

HTH

Answer 2

尝试一下breeze.js - 它包含一些方便的更改跟踪，并且还具有.Net Linq样式语法，用于查询OData / WebAPI服务，其中查询实际上将在服务器端运行。这就像是资源，但是类固醇。

使用Angular创建和更新实体的好方法是什么？

2 个答案: