I'm trying to create a web page which has a separate start page (with big picture and headline). This starting page shall vanish / lead to the actual start page on clicking it. I'm using the routeProvider and angular 1.5.
I tried two approaches:
1) Using a whole-viewport-fixed div with ng-if="showOverlay". First this div is shown and the actual start page is hidden with ng-if="!showOverlay". I toggled it using ng-click.
Problem: This worked quite fine, BUT at loading the page the whole actual-page-part briefly also was rendered and shown. Only for half a second, but too long to be nice.
Maybe someone has an idea to prevent the rendering of ALL content before valuating the ng-if...
2) using a different route for the "overlay-start-page". But here I run into the problem that the navigation bar would be on another route than index.html and thus I cant't nest the ng-views and routes correctly... And I don't want to use ui-router with states for this small page.
For this approach I didn't even get something to work and didn't find a correct approach :-(
Is there anyone with a nice (maybe totally different) idea how to achieve this "overlay"-page at the beginning? It also should be shown again if you reload the root-URL, but not until then.
I appreciate every idea. I at a loss here... Thanks in advance!
The comment by charlietfl was the correct answer, thanks:
ng-cloakand associated css as per docs
For all who also didn't know ng-cloak: The part to be shown must have the
ng-cloak directive. All parts to be hidden must have
class="ng-cloak" attached. Important: the
angular.js file must be loaded BEFORE the code, i.e. in the
<head> part of the index file.
I'll close this issue.