Menu
I am new to angular. I used AngularJS to develop front end. But at initial level I face issue for flickering some content when page is load.
My question is that when I run my app within localhost, sometimes it shows data binding expression on screen or it shows something crazy output on browser. I used ng-clock (suggest by angularjs docs) although my problem is not solved.
My html file is too small and not doing many thing although its flicker. Please note my script tag is placed on bottom. Please give me some idea to prevent this king of thing in AngularJS.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sample App</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/cover.css">
<link rel="stylesheet" href="styles/sidebar.css">
<style type="text/css"></style>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="node_modules/angular/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl" ng-cloak>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="masthead clearfix">
<div class="inner">
<div ng-include src="'views/header.html'"></div>
</div>
</div>
<div class="inner" ng-clock>
<div ng-if="hasSidebar" ng-include src="'views/sidebar.html'" id="sidebar" ng-cloak></div>
<div id="view" ng-view></div>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template</p>
</div>
</div>
</div>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="controllers/app.js"></script>
</body>
</html>
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a ng-href="#/home">Home</a></li>
<li><a ng-href="#/features">Features</a></li>
<li><a ng-href="#/contact">Contact</a></li>
<li><a ng-href="#/dashboard">Dashboard</a></li>
</ul>
</nav>
<ul class="list-unstyled">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
<li><a href="#">link6</a></li>
</ul>
<div id="content">
<h1>Dashboard</h1>
</div>
936
This could be caused because you're loading the AngularJS script at the bottom of the page.
Note that it is Angular itself that is hiding the element when you specify the ng-cloak directive.
Since your lettingt the browser render the page and then loading Angular, the time difference there might be causing the "flickering". Try to put your script tags at the top of the page.
Taken from the AngularJS docs about ngCloak:
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
