Ионный - загрузка Javascript

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

Использование загрузки

Загрузка запускается внутри контроллера. Во-первых, нам нужно ввести$ionicLoadingв нашем контроллере как зависимость. После этого нам нужно вызвать$ionicLoading.show()метод и загрузка появятся. Для его отключения есть$ionicLoading.hide() метод.

Контроллер

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTML код

<button class = "button button-block" ng-click = "showLoading()"></button>

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

При работе с загрузкой можно использовать и другие параметры опции. Объяснение приведено в таблице ниже.

Параметры загрузки

Параметры	Тип	Детали
templateUrl	строка	Используется для загрузки HTML-шаблона в качестве индикатора загрузки.
объем	объект	Используется для передачи настраиваемой области в загрузку. По умолчанию это $ rootScope.
нет	Булево	Используется для скрытия фона.
hideOnStateChange	Булево	Используется для скрытия загрузки при изменении состояния.
задержка	количество	Используется для задержки отображения индикатора в миллисекундах.
продолжительность	количество	Используется для скрытия индикатора через некоторое время в миллисекундах. Может использоваться вместоhide() метод.

Загрузка конфигурации

Ionic config используется для настройки параметров, которые вы хотите использовать во всех $ionicLoading сервисы во всем приложении.

Это можно сделать, используя $ionicLoadingConfig. Поскольку константы следует добавлять в основной модуль приложения, откройте свойapp.js файл и добавьте свою константу после объявления модуля.

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

Приведенный выше код создаст следующий экран -