在Angular中存储大型静态数组的最佳实践是什么？ [关闭]

Question

嗨我想在我的角度应用程序中存储大量国家/地区，因为有些大型表单有时需要选择国家/地区。我有以下想法，但不知道最佳做法是什么：

1. 将阵列存储在数据服务中并在需要时抓取
2. 将数组存储为组件上的属性
3. 将数组存储在静态变量文件中，并在需要时抓取

编辑：我只想补充说，这个数组将用于一个可重用的选择组件，可以在构建表单时多次使用。

Answer 1

1. 将阵列存储在数据服务中并在需要时抓取

它是最好的一个，因为Angular中的服务基本上就像一个单例。它将在整个程序生命周期中持续存在。

您甚至可以通过实现getter-setter类型的接口来使其更好。

get countries(): Country[] {
  // If present in Local Storage, return that
  // Else return whatever is there in memory
  // Else fetch from network, i.e. httpClient.get()
}

set countries(countries: Country[]) {
  // Store the countries in memory
  // Store the countries in the Local Storage
}

将数组存储为组件上的属性

非常糟糕的是，数组需要从一个组件传递到另一个组件。服务是为了共享代码。

将数组存储在静态变量文件中，并在需要时抓取

该文件将继续增长，直到您无法维护它为止。考虑分离关注点。

判决：

如果你不想遭受决定疲劳，Angular是一个固执己见的框架，与风格指南中提到的任何最佳实践一起使用！

Answer 2

您可以将数据存储在外部json文件中，然后检索控制器中的数据。只需确保在实例化控制器时注入$ http服务。

$http.get('./data/countries.json').then(function(ret){
    $scope.countries = ret.data;
});