什麼是使用Angular創建和更新實體的好方法？

我現在正在使用Angular大約2-3周，並且只使用數據綁定並嘗試創建指令。現在我想將一個對象保存到服務器上。什麼是使用Angular創建和更新實體的好方法？

域模型看起來是這樣的：

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表單，當我提交此表，它將被角處理。但是現在我想知道最好/推薦的方法是保存這種形式。

FYI：我們正在使用ASP.NET MVC 4

來源

2013-06-03 Martijn

您應該使用基於角度休息的$資源http://docs.angularjs.org/api/ngResource.$resource –

可能的重複[從服務器獲取數據的推薦方式]（http://stackoverflow.com/questions/11850025/recommended-way-of-getting-data-from-the-server） – Stewie

@Stewie它看起來像是重複的，但我不在乎'$ resource'的用法。 – Martijn

我們發現$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 PARAMS到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

來源

2013-06-03 13:04:13

感謝您的代碼。我只是好奇你的後端是怎麼樣的。我的意思是，'/ data/customer /：id'指向哪裏？這個後端是否匹配方法名稱「getAll」，「add」，「update」，「delete」？ – Martijn

該文檔提供HTTP動詞 - http://docs.angularjs.org/api/ngResource.$resource#Returns。所以你只需要一個名爲Customer的行爲作爲HttpGet，或者HttpPost來進行添加。我使用的後端是我擔心的節點。 –

剛剛更新了一些後端細節的答案。只需設置有角度的一面，然後在Chrome中打開網絡選項卡並隨之播放。 –

嘗試breeze.js考慮看看 - 它包含了一些方便的更改跟蹤，也有淨的LINQ風格的語法來查詢該查詢將實際運行服務器的OData /服務的WebAPI -側。這就像$資源，但類固醇。

來源

2013-06-03 17:20:52 Phil

+1。唯一需要注意的是它不適用於IE8及以下版本的angularjs http://stackoverflow.com/questions/14238134/breeze-and-angular-todo-app-does-not-work-with-ie-8/14244011# comment19764078_14244011 –

什麼是使用Angular創建和更新實體的好方法？

回答

相關問題