Я проработал через учебник 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
Что я могу сделать, чтобы сделать упрощенную загрузку частичного представления более гладкой?
Вы можете использовать ngAnimate для выполнения этой задачи. Его довольно просто реализовать. Проверить здесь
Преимущество ngAnimate заключается в использовании простой анимации на основе CSS. Это очень легко изменить и реализовать.
Вы можете использовать ngShow и ngHide и не показывать div до тех пор, пока данные не будут готовы.
<div ng-show="phoneList">
Phone List
</div>
предполагая, что PhoneList - это переменная области, которая содержит данные для телефонов, поступающих с сервера.
Однако ваша проблема также может быть связана с размещением ваших divs с использованием css в целом. Вы можете использовать дисплей как блок и т.д. И играть с размещением css, чтобы предотвратить возможный неприятный побочный эффект при загрузке.
Вы также можете использовать директиву ngCloak, чтобы скрыть вещи до угловых ударов.