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数据处理最佳实践

回答

相关问题