Сглаживание простых загрузок ng-view [дубликаты]

0

Я проработал через учебник angular.js.

Я заметил что-то на шаге 7, проблема, которая кажется верной для большинства угловых приложений: https://docs.angularjs.org/tutorial/step_07

При загрузке страницы или обновлении страницы маршрута, который приводит к частичной, появляется следующее: отображается index.html DOM. Затем частичный вид загружается, а затем отображается. Это приводит к смещению текста "сортировка по" на следующую строку. (при условии, что вы находитесь на мониторе с меньшим разрешением). Я не доволен этим стилем загрузки. Я объясняю это немного лучше.

Вот упрощение проблемы, указывающее, что ng-view вызывает неэстетическую нагрузку.

index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
outer top
<div ng-view></div>
outer bottom
</body>
</html>

text.html:

<div>
Some Text
</div>

Маршрутизация:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
      $routeProvider.
        when('/text', {
            templateUrl: 'partials/text.html',
            controller: 'PhoneListCtrl'
        });
  }]);

и, наконец, пустой контроллер:

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
   function($scope, $http) {
}]);

Когда вы направляете или обновляете URL-адрес на /text страницу, он кратко отображает как таковой в течение секунды секунды:

outer top outer bottom

А потом вдруг меняется на

outer top
Some Text
outer bottom

Что я могу сделать, чтобы сделать упрощенную загрузку частичного представления более гладкой?

Теги:

2 ответа

1

Вы можете использовать ngAnimate для выполнения этой задачи. Его довольно просто реализовать. Проверить здесь

Преимущество ngAnimate заключается в использовании простой анимации на основе CSS. Это очень легко изменить и реализовать.

Поделиться
0

Вы можете использовать ngShow и ngHide и не показывать div до тех пор, пока данные не будут готовы.

<div ng-show="phoneList">
  Phone List
</div>

предполагая, что PhoneList - это переменная области, которая содержит данные для телефонов, поступающих с сервера.

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

Вы также можете использовать директиву ngCloak, чтобы скрыть вещи до угловых ударов.

Поделиться
  • 0
    К сожалению, я не был достаточно осторожен с моим вопросом. Это даже более простой сценарий, чем загрузка данных. Нет загружаемых данных вообще. Это касается загрузки чистого HTML. Я несколько отредактировал свой вопрос, чтобы прояснить ситуацию.
  • 0
    На самом деле не имеет значения, загружены данные или нет, возможно, вы можете использовать ngCloak или css fix. Теоретически, вы динамически вставляете div. Либо спрячьте все перед вставкой с помощью плаща, либо заранее подготовьте пространство с помощью правил CSS, таких как блок отображения и т. Д.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню