As you know splash page is one you show when Angular is
loading. If you have too many pages in your site or depend on several heavy
weight javascript libraries you page may take a while for initial loading. In
those scenarios a splash page would be a good way to engage the user. A typical
splash page is show a loading image to the user while AngularJS is loading.
For typical single page applications developed in Angular we
use views with routing. In these scenarios it is very easy to implement the
splash page. All you need is to keep your splash page inside the ng-view. When
Angular loads, it replaces the ng-view with the corresponding template. Here is
the html (ASP.NET MVC) code implementing the splash page.
<html ng-app="appstyleguide">
<head>
<meta name="viewport" content="width=device-width" />
<title>AngularJS Styleguide</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div ng-view>
<div id="splash" class="splash">
Loading ...
</div>
</div>
@Scripts.Render("~/scripts/libraries")
@Scripts.Render("~/scripts/app")
</body>
</html>
In the above code, I am using ASP.NET to include the script
files and css files.
In most scenarios we will be having more content than the
just the ng-view directive. We will have the headers, menus etc. In those
scenarios we need to hide these until Angular loads. For this Angular provides
ng-cloak directive. This directive along with the css hides the content on the
page till Angular loads. Here is the html with ng-cloak hiding the additional
elements of the page and just showing the splash page.
<html ng-app="appstyleguide">
<head>
<meta name="viewport" content="width=device-width" />
<title>AngularJS Styleguide</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div ng-cloak>
<h2>AngularJS Styleguide</h2>
<a href="/home">Home</a> <a href="/contact">Contact</a>
</div>
<div ng-view>
<div id="splash" class="splash">
Loading ...
</div>
</div>
@Scripts.Render("~/scripts/libraries")
@Scripts.Render("~/scripts/app")
</body>
</html>
Using ng-cloak and ng-view we can show the splash page while
Angular is loading.
Please go to my GitHub project for a style guide project using Visual studio
https://github.com/prasannapattam/ng-demos/tree/master/ng-demos/ng-styleguide
No comments:
Post a Comment