0

I have worked my way through the angular.js tutorial.

I noticed something in step 7, an issue that seems to be true for most angular apps: https://docs.angularjs.org/tutorial/step_07

On the page load or a page refresh of a route that leads to the partial the following appears to occur: index.html's DOM is displayed. Then the partial view is loaded and then displayed. This causes the "sort by" text to then be shifted to the next line. (assuming you're on a lower res monitor). I am not happy with this style of loading. I explain it a bit better below.

Here is a simplification of the problem that indicates that the ng-view is causing an unaesthetic load.

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>

The text.html partial:

<div>
Some Text
</div>

The routing:

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

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

and finally an empty controller:

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

When directing to or refreshing the URL to the /text page it briefly renders as such for a split second:

outer top outer bottom

And then suddenly changes to 

outer top
Some Text
outer bottom

What can I do to cleanly make a simplistic partial view load smoother?

k29
  • 641
  • 6
  • 26
  • This was also helpful in getting to my solution http://stackoverflow.com/questions/27901845/page-loading-with-rootscope-variable-variable-not-set-on-state-change – k29 Nov 10 '15 at 18:16

2 Answers2

1

You can use ngAnimate to achieve this task. Its fairly simple to implement. Check Here

The advantage of ngAnimate is it uses simple CSS based animation. Which is very easy to change and implement.

Avinash Jain
  • 7,200
  • 2
  • 26
  • 40
0

You can use ngShow and ngHide and do not show the div until data is ready.

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

assuming phoneList is the scope variable that contains the data for the phones coming from server.

However, your problem can also be related to your divs placement using css in general. You can use display as block etc and play with the css placement to prevent that nasty side effect on loading perhaps.

You can also use ngCloak directive to hide stuff before angular kicks in.

Community
  • 1
  • 1
mentat
  • 2,748
  • 1
  • 21
  • 40
  • Unfortunately I haven't been careful enough with my question. It is an even simpler scenario than data loads. There is no data being loaded at all. This is regarding loading pure html. I have edited my question somewhat to make this clearer. – k29 Nov 02 '15 at 20:30
  • It doesn't really matter if data is loaded or not, you can either use ngCloak or css fix perhaps. In theory, you are dynamically inserting a div. Either hide everything before insertion with a cloak or prepare the space beforehand with css rules such as display block etc. – mentat Nov 02 '15 at 20:33
  • You should consider utilizing the .ng-enter and .ng-leave ngAnimate classes. You can alter their transition periods to your liking and even specify your own classes to single out like: form.ng-leave – Yeysides Nov 02 '15 at 20:41