Jana Jana - 1 month ago 7
AngularJS Question

How to achieve separate start page for website with angularJS?

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!

Answer

The comment by charlietfl was the correct answer, thanks:

try using ng-cloak and 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.