I have successfully implemented and displayed templates with data retrieved from a REST service using AngularJS. However, I am facing an issue where the footer template briefly appears at the top of the page while the JSON response is still loading, and then moves to the bottom once the data is fetched.
This happens very quickly, but it causes the footer template to flicker at the top before settling at the bottom.
I attempted to use the ng-cloak approach as suggested in the API Reference, but unfortunately, the problem persists. I applied the CSS to ng-cloak element as recommended.
Below is my application code:
<body>
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>
I tried applying ng-cloak to various elements such as the body tag, ng-view, footer, and inside the ng-view HTML template. The provided code represents all my attempts (Note: I tried using them separately, together, with ng-cloak class, and without).
<body ng-cloak class="ng-cloak">
<div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div>
<div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div>
<div ng-view="main" ng-cloak class="ng-cloak"></div>
<footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>
Despite trying these solutions, the issue of the footer template flickering at the top persists until the loading is complete.
Can anyone provide assistance on how to resolve this issue?
Are there any Bootstrap tricks to keep the footer at the bottom even when the main div has no height? I experimented with the nav-fixed-bottom tag, but I do not want the footer fixed on the screen when the page has a large height.
Thank you!!!