AngularJS RDBMS數據處理最佳實踐

隨着SPA應用程序的增長，有些事情在Angular JS中變得不清楚。假設我們有一個包含很多引用實體的RDBMS數據結構，比如Country（id），State（id，countryId），City（id，stateId），Street（id，cityId）。AngularJS RDBMS數據處理最佳實踐

我們需要在單個視圖中渲染大部分視圖，就像按照父節點遞歸分組的街道索引一樣。我知道這不是很實際的例子，特別是考慮到我們真正的應用程序實體具有我們需要綁定的相互數據。

「最佳實踐」將會如何？現在

，我們使用大量的NG-repeat的像這樣的：

<ul> 
    <li ng-repeat="country in countryList"> 
     {{ country.name }} 
     <ul ng-if="(stateList | filter:{countryId === country.id}).length"> 
      <li ng-repeat="state in filterStatesByCountryId(country.id)"> 
      {{ state.name }} 
       <ul ng-if="(cityList | filter:{stateId === state.id}).length"> 
        <li ng-repeat="city in cityList | filter:{stateId === state.id}">{{ city.name }}</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</li>

filterStatesByCountryId(country.id)相同stateList | filter:{countryId === country.id}。

我們的應用程序必須有適當的綁定，因此如果street.name屬性在StreetService中得到更新，該視圖反映了此更改。因此$scope.streetList = StreetService.all不是開箱即用的選項，而是$scope.streetList，我們將有$scope.street = StreetService，然後將其用作$scope.street.all | filter:{cityId: city.id}。

必須說這看起來很可怕。

什麼是最佳的性能和服務體系結構明智的呈現和顯示這種數據列表的方式？

想法之一是將整個合併的實體層次結構存儲到一個。因此那個擁有所有州，城市和街道的國家成爲一個對象。然後country實體將擁有states {Array.<StateEntity>}屬性，state {StateEntity}將具有cities {Array.<CityEnity>}屬性等。但是，如果單個street.name會更新，我們需要遍歷整個country數據對象以找到我們需要更新的街道，進行更新，然後重新 - 提供視圖，或者只是有一個$scope.watch(expr, fn, true)這將是一個複雜的層次結構的矯枉過正。

謝謝。

P.S.我們無法切換到NoSQL來存儲數據。

來源

2015-10-12 Aleksandr Makov

Angular沒有真正構建來處理關係數據結構我可以看到你在這裏要做的是模仿C＃MVC模板for循環。

的事情是讓我們說你有： - 100個國家的名單=> 100觀察家 - 每個國家=> 60個000觀察家30上下的城市 - 每個國家=> 2000上下的觀察家 20上下的狀態

如果您要在一個屏幕上顯示所有內容，現在不是您正在進行的操作，但請牢記這一點。

作爲初步的性能改進，我會爲每個ng-repeat語句添加一條軌跡。

從角文檔它指出：

如果您使用的是具有標識屬性的對象，則可以通過該標識符，而不是整個對象跟蹤。如果你重裝後您的數據，ngRepeat不會有重建DOM元素它已經呈現項目，即使集合中的JavaScript對象已取代了新的

也

注：通過跟蹤必須始終是最後表達

現在，NG-重複，可以在性能有點呆滯，我不會2路數據綁定視圖屬性：

{{ city.name }} => {{ ::city.name }}

這可以給你一個顯着的速度增加，因爲角度不會綁定觀察者到這些字段。

但是，要解決您的基本問題，我會將它建模爲一個單獨的JSON數據集。但是，您不想通過改變數據集來處理Angular的麻煩。至少我不會，所以在這種情況下我只需要一個簡單的單向數據綁定。我不知道一個街道名稱會隨時改變的頻率。

這將是這個樣子：

<li ng-repeat="country in ::countryList track by country.id">

而且也許嘗試使用controllerAs語法，有助於更清潔的代碼。

但是，如果你真的遇到ng-repeat的速度問題，最好是根據你的用例編寫自己的版本。

來源

2015-10-12 11:30:03

AngularJS RDBMS數據處理最佳實踐

回答

相關問題