javascript - ¿Cuál es la mejor práctica para almacenar un arreglo estático grande en Angular?

Hola, quiero almacenar un gran arreglo de países en mi aplicación Angular ya que hay formularios grandes que a veces requieren seleccionar un país. Tengo las siguientes ideas, pero no tengo idea de cuál es la mejor práctica:

1. Almacena el arreglo en un servicio de datos y recupéralo cuando sea necesario
2. Almacena el arreglo como una propiedad en el componente
3. Almacena el arreglo en un archivo de variables estáticas y recógelo cuando sea necesario

EDITAR: Solo quiero agregar que este arreglo se usará en un componente de selección reutilizable que se puede usar muchas veces al construir los formularios.

Respuesta #1

1. Almacena el arreglo en un servicio de datos y recupéralo cuando sea necesario

Es el mejor, ya que un servicio en Angular se comporta básicamente como un singleton. Persistirá a lo largo del ciclo de vida del programa.

Incluso puedes mejorarlo implementando un tipo de interfaz de 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
}

Almacena el arreglo como una propiedad en el componente

Muy mala idea, el arreglo necesita ser pasado de un componente a otro. Los servicios fueron creados para compartir código.

Almacena el arreglo en un archivo de variables estáticas y recógelo cuando sea necesario

Ese archivo seguiría creciendo, hasta que no podrías mantenerlo. Piensa en la separación de responsabilidades.

Veredicto :

Angular es un framework con opiniones propias, sigue las mejores prácticas mencionadas en la Guía de Estilo, ¡si no quieres sufrir de Fatiga de Decisiones!

Respuesta #2

Puedes almacenar tus datos en un archivo json externo y luego recuperar los datos en tu controlador. Solo asegúrate de inyectar el servicio $http al instanciar tu controlador.

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