試圖將我的webservice連接到PLANK上的RestAngular現場演示

Question

我深深地陷入了另一個angularJS學習山谷。我試圖在我們的C＃.net環境中工作的掠奪者獲得RestAngular現場演示。當我到達這條線時：

$scope.projects = Restangular.all("projects").getList().$object; 

我在響應正文中得到了這個結果。

[ { "_id" : { "id" : 13} , "name" : "choiceBro" , "description" : "devils" , "site" : "https://www.google.co.uk/" , "id" : "923856329485632"} , 
    { "_id" : { "id" : 14} , "name" : "TESTING2" , "description" : "435q1gfdgfdgsda" , "site" : "http://www.567567.try"} , 
    { "_id" : { "id" : 15} , "name" : "Updated" , "description" : "435q1gfdgfdgsda" , "site" : "http://www.567567.try"} ,... 

當我打我的web服務：

$scope.projects = Restangular.all("projects").getList().$object; 

我得到這個早在響應體：

[{"id":1,"description":"All information everywhere","name":"Google","site":"http://Google.com","CreateId":"CRGA","CreateTimestamp":"\/Date(1445003454083)\/","ModifyId":"*Load*","ModifyTimestamp":"\/Date(1445003454083)\/"} , 
    {"id":2,"description":"All things Microsoft","name":"Microsoft","site":"http://Microsoft.com","CreateId":"CRGA","CreateTimestamp":"\/Date(1445003454083)\/","ModifyId":"*Load*","ModifyTimestamp":"\/Date(1445003454083)\/"} , 
    {"id":3,"description":"All things Strle","name":"Strle","site":"http://Strle.com","CreateId":"CRGA","CreateTimestamp":"\/Date(1445003454083)\/","ModifyId":"*Load*","ModifyTimestamp":"\/Date(1445003454083)\/"}] 

我的對象是回來與名稱，地點，描述。我預計這足以呈現網頁 - 但事實並非如此。我注意到所有示例對象中的{ "_id" : { "id" : 99}。那是對我有用的嗎？如果是，那是幹什麼的？

Answer 1

所以問題是{ "_id" : { "id" : 99}對我不利。在HTML頁面上的模型

RestangularProvider.setRestangularFields({ 
     id: 'id' 
    }); 

然後，在list.html detail.html部分我.id取代._id.$oid：我改變了_id爲ID在app.js文件中的配置模塊中。之後，它按預期工作。

Answer 2

我看到你已經自己解決了這個問題，但我仍然想與你分享我的經驗。這不是嚴格回答你原來的問題，但也許會在未來爲你節省一些麻煩。

Serverside集團

這是相當方便的包裝你的數據應該由Restangular有一個微小的視圖模型這樣的消耗：

public class RestangularWrapper<T> 
{ 
    public T Items { get; set; } 

    public dynamic Meta { get; set; } 
} 

當我開始了Restangular我只用匿名對象作爲隨着時間的推移，結果變得相當混亂。用這種方式包裝結果可以讓你更清楚地知道你實際在做什麼/返回。

客戶方

要消耗這個結果與Restangular您需要在您的app.run添加ResponseInterceptor（）函數：

angular.module("myApp").run(["Restangular", function run(Restangular) { 
     Restangular.addResponseInterceptor(function (data, operation, what, url, response, deferred) { 
      var result; 
      result = data.Items || {}; 
      result.meta = data.Meta; 
      return result; 
     }); 
    }]); 

我有得到一個服務裏面我所有的Restangular電話隨時隨地注入。因此，使用上述的設置，看起來是這樣的：

的服務與Restangular

(function() 
{ 
    "use strict"; 

    angular.module("myApp").factory("myService", myService); 
    myService.$inject = ["Restangular", "$log"]; 

    function myService(Restangular, $log) 
    { 
     return { 
      getSomeData: getSomeData 
     }; 

     function getSomeData(currentPage, pageSize, searchTerm) 
     { 
      return Restangular.all("some/paged/result").getList({ 
        page: currentPage, 
        pageSize: pageSize, 
        search: searchTerm || "" 
       } 
      ); 
     } 
    } 
})(); 

使用該服務在控制器

(function() 
{ 
    "use strict"; 

    angular.module("myApp").controller("myController", myController); 
    myController.$inject = ["myService"]; 

    function myController(myService) 
    { 
     var self = this; 
     self.resultCount = 0; 
     self.pageCount = 0; 
     self.items = null; 
     self.pageSize = 8; 
     self.currentPage = 1; 
     self.isLoading = false; 

     /*...more code for handling the paging, etc would go here...*/ 

     function loadDataFromServer(searchText) 
     { 
      self.isLoading = true; 
      myService.getSomeData(self.currentPage, self.pageSize, searchText) 
       .then(function (responseData) 
       { 
        self.resultCount = responseData.meta.TotalRecordCount; 
        self.pageCount = responseData.meta.PageCount; 
        self.items = responseData; 
        self.isLoading = false; 
       }); 
     } 
    } 
})(); 

我希望這是一個有點對您有所幫助。