I have an angular controller that loads 4-5 different resources from the server. Upon those resources being received the UI fills the necessary content for the page. The problem I'm having now is that the page load is not very smooth. The page's layout loads immediately, and then different elements pop into existence over the next 1-2 seconds. The load time isn't really the issue, it's just the abruptness of it. Is there a standard way to deal with this?
2
-
If you 're using $routeProvider then you can use "resolve". This would first load all the dependencies needed by the controllerbefore loading the controller itself.AlwaysALearner– AlwaysALearner2013-08-05 17:39:42 +00:00Commented Aug 5, 2013 at 17:39
-
Or else you can have nested $https or something else to track when the last resource has loaded and then update the view all at once.AlwaysALearner– AlwaysALearner2013-08-05 18:05:31 +00:00Commented Aug 5, 2013 at 18:05
Add a comment
|
4 Answers
A trick I use is to default everything to opacity 0, then use CSS transforms to transform them to opacity 1 over about 250ms (quick fade). I apply a class when it's done loading by using the ng-class directive.
Give this code:
ng-class='{showme:hugeArray}' it should apply a class when hugeArray is done loading. Before hugeArray loads or exists, it will be undefined, therefore false and the class showme won't be applied. When hugeArray comes back from your resource, it exists.
Just combine that 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;
}
Comments
If you have to load the resources in your controller anyway, you should move this logic to the $routerProvider resolve property, so loaded resources get injected into controller once they are resolved. $route service won't make a routechange if a promise gets rejected, so everything is there when your view change happens.
Comments
There are a couple of different ways I can think of, here are a few. Here might be a simple one that you could change to fit your needs.
HTML
<body ng-show="object.length"> ...
Controller
$scope.object = Object.query();
Or you could use promise objects to know when they've finished loading. I don't know if you want to hide the body until they're loaded, display them all at the same time, or other.
Comments
I think the other answers here are good, but ngCloak is worth mentioning too. It would probably be best used in combination with the some of the other methods.
