Question

我已经完成了angular.js教程。

我在第7步中发现了一些问题，对于大多数角度应用来说，这个问题似乎都是正确的： https://docs.angularjs.org/tutorial/step_07

在页面加载或导致部分路径的页面刷新中，似乎发生以下情况：显示index.html的DOM。然后加载部分视图然后显示。这导致＆＃34;排序＆＃34;然后将文本转移到下一行。（假设您在较低分辨率的监视器上）。我对这种装载方式不满意。我在下面解释得更好。

这是问题的简化，表明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) {
}]);

当指向或刷新/text页面的网址时，它会暂时呈现为一瞬间：

outer top outer bottom

然后突然变为

outer top
Some Text
outer bottom

我可以做些什么来干净利地使简化的局部视图加载更顺畅？

Answer 1

您可以使用ngAnimate来完成此任务。它实现起来相当简单。 Check Here

ngAnimate的优势在于它使用简单的基于CSS的动画。这很容易改变和实施。

Answer 2

您可以使用ngShow和ngHide，并且在数据准备就绪之前不显示div。

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

假设phoneList是包含来自服务器的电话数据的范围变量。

但是，您的问题也可能与使用css的div放置有关。您可以使用显示作为块等，并使用css放置来防止加载时产生令人讨厌的副作用。

你也可以使用ngCloak指令隐藏角色之前的内容。

平滑简单的ng-view负载

2 个答案: