Как сделать предварительный выбор URL в ионных/угловых?

Я новичок в ionic 1, и я работаю над приложением (с Ionic 1 и angular js) с несколькими URL-адресами, где каждый URL-адрес отображает список категорий, а затем список элементов для каждой категории и каждый элемент имеет URL-адрес документа. Как предварительно загрузить все эти URL-адреса при запуске в фоновом режиме, но не отображать их? Есть ли способ, которым это может быть достигнуто? хороший пример кода или учебник помогут очень. Кроме того, пожалуйста, сообщите мне, будет ли это наилучшим подходом, как при предварительной загрузке и предварительном кэшировании всего содержимого при запуске, или же это должно быть сделано по категории или по другому.

Спасибо заранее!

Ответ 1

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

Да, вы можете начать загрузку URL-адресов на первую страницу, так как вы хотите, чтобы они получали данные, которые вы хотите использовать на будущих экранах.

В терминах хранения

  • В AngularJs, если вы хотите, чтобы что-то сохранялось во всей области применения, вы должны использовать $rootscope [остерегайтесь хранить много данных может привести к проблемам с памятью, вам необходимо регулярно ее очищать].
  • Или другой вариант - сохранить его в Localstorage. И выберите в соответствии с вашими потребностями.
  • Если вы хотите, вы можете делиться этими массивами между различными контроллерами экранов.

Во время загрузки [получения ответа от сервера] вы можете сделать две вещи 1. get single JSON response having all the data 2.have multiple urls, and load them serially.

В соответствии с вашими требованиями по загрузке 5-го (страничного) экрана данных заблаговременно это не очень хорошая практика, и даже прекратить просмотр пользователями обновлений, но как ваше требование. У нас есть несколько подходов:

  • Добавьте всю категорию и их соответствующие данные в соответствии с вашим пастебином, как сердечный, тогда он подробнее.. почка затем подробнее.. Вы можете сделать это с помощью управления иерархиями [категорий], такими как основная группа родителей, и дочерней дочерней группой в JSONArray и сведениями в JSONObject. (Это изменение будет на стороне сервера-отправителя)

Вам нужно загрузить только один URL-адрес, чтобы получить все данные. Поэтому вам не нужно загружать разные URL-адреса, как сейчас. Но будьте осторожны, это будет большой Джон. Поэтому, когда вы храните его, разделяйте категории и требуемые данные [экранные требования] и храните их в локальном хранилище, чтобы они были легко доступны.

  1. Другой подход заключается в том, что вы должны указать имена подгрупп [category] для загрузки, чтобы загрузка была похожа на запуск одного и того же URL с разными именами категорий для получения данных и сохранения их в локальном хранилище.

Это может привести к пожару около 10-15 [зависит от ваших категорий]. URL-адреса могут влиять на ответ потока пользовательского интерфейса. Это не потребует никаких изменений в ответе на сервер.

**

Программный подход к загрузке URL-адресов последовательно:

**

Загрузка URL: этот метод получит подробную информацию о конкретной категории [id или что-то еще работает для вас]. Это запустит HTTP-запрос и вернет результат.

getCategoryDetails(category){
url = url+category;
return $http({ 
        method: 'GET', 
        url: url, 
        headers: --
    }).then(function onSuccess(response) {  //<--- `.then` transforms the promise here

//Вы можете хранить эфир в локальном хранилище           ответ возврата       }, функция onError (response) {           throw customExceptionHadnler.getErrorMsg(response.status, response.data);       });   }

Параллельно: этот метод будет делать это параллельно, мы просто загружаем категории [ids], поскольку у нас есть все они, а затем используйте $q.all, чтобы дождаться завершения загрузки URL.

 function loadUrlsParallel(urls) {
     var loadUrls = []
     for(var i = 0; i < urls.length; i++) {
         loadUrls.push(getCategoryDetails(urls[i]))
     }
     return $q.all(loadUrls) 
}

Первый API: этот способ загрузки первого URL-адреса, а затем Загрузка URL-адресов в метод параллельного вызова выше

getListOfCategories(){
url = url;
return $http({ 
        method: 'GET', 
        url: url, 
        headers: --
    }).then(function onSuccess(response) {  //<--- `.then` transforms the promise here

//Вы можете хранить эфир в локальном хранилище или напрямую отправлять ответ           ответ возврата       }, функция onError (response) {           throw customExceptionHadnler.getErrorMsg(response.status, response.data);       });   }

URL: вам нужно подготовить список URL-адресов с добавочной категорией загрузить после загрузки первого URL [ожидая, что это вернет вам все категории, которые потребуются в вашем приложении заранее) и перейти к loadUrls Параллельный метод.

Вы можете написать методы loadUrl в соответствии с вашим удобством, здесь задан как пример, так что он не может работать как есть.

Вы можете загружать ответы API каждый раз из локального хранилища, где вы храните его после вызовов API. Таким образом, это не будет просить вас выполнять вызовы API на каждом лаянге страниц [screen]

Надеюсь, это поможет вам и решит вашу проблему.

Ответ 2

Обновление. Поскольку OP уже знает и использует localStorage, таким образом, дополнительные предложения: -

В этом случае вы можете либо вызвать все свои методы обслуживания для получения данных при запуске, либо использовать браузер без заголовка, например " PhantomJS", чтобы посетить эти URL-адреса при запуске и получить данные,

Таким образом, ваш код будет выглядеть примерно так: -

var webPage = require('webpage');

var page = webPage.create();

page.open('http://www.google.com/', function(status) {
  console.log('Status: ' + status);
  // Do other things here...
});

Для получения дополнительной информации о PhantomJS см. следующие ссылки: -

http://phantomjs.org/ http://phantomjs.org/api/webpage/method/open.html

Предыдущие предложения

Сделайте запрос HTTP в своей службе, чтобы получить данные и сохранить их в localStorage, как показано ниже: -

$http.get('url', function(response) {
var obj = response.data;
window.localStorage.setItem('key', JSON.stringify(obj)); // Store data to localStorage for later use
});

Для получения данных: -

var cachedData = JSON.parse(window.localStorage.getItem('key')); // Load cached data stored earlier

Более подробную информацию о ' localStorage см. в следующей ссылке: https://www.w3schools.com/html/html5_webstorage.asp

Надеюсь, это поможет!

Ответ 3

Лучший способ обмена данными между различными представлениями в angular - использовать службу, поскольку она является одноэлементной и может использоваться в других контроллерах. В главном контроллере вы можете предварительно отбирать свои списки категорий асинхронно через службу, которую можно использовать для следующих просмотров. Ниже приведена небольшая демонстрация, которую вы называете

angular.module("test").service("testservice",function('$http',$q){
    var lists = undefined;
    // fetch all lists in deferred technique
    this.getLists = function() {
      // if lists object is not defined then start the new process for fetch it
      if (!lists) {
        // create deferred object using $q
        var deferred = $q.defer();
         // get lists form backend
        $http.get(URL)
          .then(function(result) {
            // save fetched posts to the local variable
            lists = result.data;
            // resolve the deferred
            deferred.resolve(lists);
          }, function(error) {
            //handle error
            deferred.reject(error);
          });
        // set the posts object to be a promise until result comeback
        lists = deferred.promise;
      }

      // in any way wrap the lists object with $q.when which means:
      // local posts object could be:
      // a promise
      // a real lists data
      // both cases will be handled as promise because $q.when on real data will resolve it immediately
      return $q.when(lists);
    };
this.getLists2=function(){
//do it similarly as above
};
}).controller("mainController",function(testservice,$scope){
    $scope.lists1=testervice.getLists()
        .then(function(lists) {
        //do something 
        });
    };
    $scope.lists2=testervice.getLists2()
        .then(function(lists) {
        //do something 
        });
    };
    $scope.lists1();
    $scope.lists2();
}).controller("demoController1",function(testservice,$scope){
    $scope.lists1=testervice.getLists()
        .then(function(lists) {
        //do something 
        });
    };
    $scope.lists2=testervice.getLists2()
        .then(function(lists) {
        //do something 
        });
    };
    $scope.lists1();
    $scope.lists2();
});