平滑簡單的ng視圖加載

我發現了一些步驟7，這似乎是大多數角應用真正的問題： https://docs.angularjs.org/tutorial/step_07

在頁面加載或路線的頁面刷新，導致部分下面似乎發生：顯示index.html的DOM。然後加載部分視圖然後顯示。這會導致「排序依據」文本被轉移到下一行。（假設你使用的是低分辨率顯示器）。我對這種加載方式不滿意。我在下面解釋一下。

這是一個簡化的問題，指出ng視圖造成的美學負擔。

的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-有幫助可變變量未設置狀態變化 – k29

您可以使用ngAnimate來完成此任務。它的實現相當簡單。 Check Here

ngAnimate的優點是它使用簡單的基於CSS的動畫。這很容易改變和實施。

來源

2015-11-02 20:17:45

您可以使用ngShow和ngHide，並在數據準備就緒之前不顯示div。

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

假設phoneList是包含來自服務器的電話數據的範圍變量。

但是，您的問題也可能與您的div放置使用一般的CSS。你可以使用顯示塊等，並與CSS放置玩，以防止加載可能的噁心副作用。

您還可以使用ngCloak指令隱藏的角度踢前東西英寸

來源

2015-11-02 20:24:17 mentat

不幸的是，我對我的問題一直不夠細心。這比數據加載更簡單。根本沒有數據被加載。這是關於加載純html的。爲了使這個更清楚，我編輯了我的問題。 – k29

數據加載與否並不重要，你可以使用ngCloak或css修正。理論上，你是動態插入一個div。或者在用斗篷插入之前隱藏所有內容，或者事先用css規則（如顯示塊等）準備空間。 – mentat

您應該考慮使用.ng-enter和.ng-leave ngAnimate類。你可以根據自己的喜好改變他們的過渡時期，甚至可以指定你自己的課程，比如form.ng-leave – Yeysides

平滑簡單的ng視圖加載

回答

相關問題