Сглаживание простых изображений ng-view

Я проработал свой путь через учебник angular.js.Сглаживание простых изображений ng-view

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

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

Ниже приведено упрощение проблемы, указывающее, что 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

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

источник

2015-11-02 k29

Это также полезно в том, чтобы мое решение http://stackoverflow.com/questions/27901845/page-loading-with-rootscope- переменная-переменная-not-set-on-state-change – k29

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

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

источник

2015-11-02 20:17:45

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

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

Предполагая, что phoneList является переменной области, содержащей данные для телефонов, поступающих с сервера.

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

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

источник

2015-11-02 20:24:17 mentat

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

На самом деле не имеет значения, загружены ли данные или нет, вы можете использовать ngCloak или css fix. Теоретически вы динамически вставляете div. Либо скрыть все перед вставкой с плащом, либо заранее подготовить пространство с помощью правил CSS, таких как блок отображения и т. Д. – mentat

Вам следует рассмотреть возможность использования классов ngAnimate .ng-enter и .ng-leave ngAnimate. Вы можете изменить свои периоды перехода по своему вкусу и даже указать свои собственные классы, чтобы выделить: form.ng-leave – Yeysides

Сглаживание простых изображений ng-view

ответ

Смежные вопросы