A splash screen while the rest of the page is loading. A splash screen is simply a full-screen block of HTML that we will show when the page is loading.
We can do this using the ngCloak directive that is built into Angular itself. The ngCloak directive's entire responsibility is to hide uncompiled content from the browser before the angular app has been loaded.
We can do this using the ngCloak directive that is built into Angular itself. The ngCloak directive's entire responsibility is to hide uncompiled content from the browser before the angular app has been loaded.
<html>
<head>
<title>My Angular App</title>
<style type="text/css"> .splash {} </style>
</head>
<body ng-app="myApp">
<!-- The splash screen must be first -->
<div id="splash" ng-cloak>
<h2>Loading</h2>
</div>
<!-- The rest of our app --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-controller="MainController"> </div>
<script src="js/app.js"></script>
</body>
</html>
Hiding our splash screen when the app is ready
[ng-cloak].splash {
display: block !important;
}
[ng-cloak] {display: none;}
/* some naive styles for a splash page */
.splash {
background: blue;
color: white;
}
.splash h2 {
font-size: 2.1em;
font-weight: 500;
}
0 comments:
Post a Comment