Как предварительно загрузить данные JSON, чтобы он был доступен, когда модуль Angularjs готов

Question

У меня очень простое приложение, которое загружает массив JSON с использованием $ http.get внутри контроллера. Он присваивает данные результата областям, и HTML повторяет результаты, чтобы отобразить список. Это очень простой угловой пример.

function ViewListCtrl($scope, $http) { 

$scope.shoppinglist = []; 

$scope.loadList = function() { 

    var httpRequest = $http({ 
     method: 'POST', 
     url: 'viewList_service.asp', 
     data: '' 

    }).success(function (data, status) { 
     $scope.shoppinglist = data; 
    }); 

}; 

$scope.loadList(); 

} 

При тестировании на медленном сервере я понял, что задержка блокировки 3 секунды раздирает область повтора. Отладка показала мне, что мой контроллер не пытается получить данные до загрузки страницы. Моя страница занимает 3 секунды для загрузки. Затем я должен подождать еще 3 секунды для загрузки данных json.

Я хочу как можно скорее загрузить данные, поэтому он готов, когда мой контроллер готов. Проще говоря, я хочу предварительно загрузить данные, чтобы он загружался параллельно моему модулю.

Я искал все, и ближайшая вещь, которую я нашел, была «разрешена», но я не использую маршруты. Это очень простой список и никаких маршрутов или шаблонов.

Как загрузить JSON, как только страница начнет визуализироваться, так что она готова, когда контроллер готов и нет блокировки ... и затем получить эти данные в область видимости?

Answer 1

Похоже, что ваша латентность исходит из медленной сети + сервера, а не большого количества данных.

Итак, вы можете отобразить тег на своей странице, чтобы данные были отправлены вместе со ответным HTML-ответом. Недостатком является то, что вы жестко кодируете свои данные на своей странице. Этот тег будет в основном предварять кеш $ http вашими данными.

var listJson = {...json data here, rendered server-side...}; 

mod.run(function($cacheFactory) { 
    var cache = $cacheFactory('yourListCacheId'); 
    cache.put('list-cache-id', listJson); 
    // store "cache" somewhere you can retrieve it, such as a service or value. 
}); 

Затем либо используйте свойство кеша $ http, либо оберните $ http в пользовательскую службу, которая проверяет кеш.

Конечно, корень проблемы заключается в том, что ваш сервер занимает 3 секунды на запрос, когда вы обычно хотите, чтобы не менее в подсезонной области.

Answer 2

Вы можете использовать метод module.run. Выполняется после завершения этапа конфигурации. Для того, чтобы воспользоваться этим вам нужно создать сервисный завод, который делает фактический запрос и кэширует результат

module("myapp",[]).factory('listService', function($q,$http) { 
    var listData; 
    var defer = $q.defer(); 
    return { 
     loadList: function() { 
      if(listData) { 
       defer.resolve(listData); 
      } 
      else { 

       var httpRequest = $http({ 
       method: 'POST', 
       url: 'viewList_service.asp', 
       data: '' 
      }) 
      .success(function(data) { 
       listData=data; 
       defer.resolve(listData); 
      } 
     } 
     return defer.promise; 
    } 
} 
}); 

В контроллере вы все еще используете завод, чтобы получить данные с обещанием затем оберткой.

listService.loadList().then(function(data) { 
    $scope.shoppinglist=data; 

}); 

Этот способ позволяет выполнить асинхронный вызов даже до выполнения любого кода, связанного с контроллером.

Answer 3

Вы можете загрузить данные, написав код (что-то вроде списка Chandermani listService) в отдельном файле, но без использования углового. вы можете использовать jquery ajax для загрузки ваших данных.

Затем напишите сервис в угловом формате, чтобы прочитать эти данные и передать их контроллеру.