All geek questions in one place

Angularjs and smooth page loading

I have an angular controller that downloads 4-5 different resources from the server. Upon receipt of these resources, the user interface fills in the necessary content for the page. The problem I am facing right now is that the page loading is not very smooth. The page layout is loaded immediately, and then the following elements appear within the next 1-2 seconds. Boot time is not really a problem, it's just its suddenness. Is there a standard way to handle this?

+4
source share
4 answers

If you still need to load the resources of your controller, you must move this logic to the $routerProvider resolve property, so the loaded resources will be entered into the controller after they are resolved. The $route service will not change the route if the promise is rejected, so everything will take place when you change your mind.

0
source

The trick I use is by default to use all opacity 0, and then use CSS transforms to convert them to opacity 1 for about 250 ms (fast fading). I use the class when it was loading using the ng-class directive.

Give this code: ng-class='{showme:hugeArray}' it should apply the class when hugeArray is loading. Before the array or array is loaded or exists, it will be undefined, so false and the showme class showme not be applied. When hugeArray returns from your resource, it exists.

Just combine this with this CSS:

 .something { opacity: 0; text-align: center; -webkit-transition: opacity 0.25s ease-in; -moz-transition: opacity 0.25s ease-in; -o-transition: opacity 0.25s ease-in; -ms-transition: opacity 0.25s ease-in; transition: opacity 0.25s ease-in; } .something .showme{ opacity: 1; }
+1
source

There are several different ways that I can think of, here are a few. Here may be a simple one that you can change to suit your needs.

HTML

 <body ng-show="object.length"> ...

controller

 $scope.object = Object.query();

Or you can use promise objects to find out when they finished loading. I do not know if you want to hide the body until it is loaded, it will show them all at the same time or another.

0
source

I think the other answers here are good, but ngCloak is also worth mentioning. This is probably best used in combination with some other methods.

http://docs.angularjs.org/api/ng.directive:ngCloak

0
source

Source: https://habr.com/ru/post/1495370/

More articles:


All Articles