No data found showing on page loading in AngularJS - angularjs

Question

I am displaying some data, so while the page is loading, "No data found" control is working, what should I do to prevent this ?
Here is my code
<ul id="owl-example" class="list-unstyled topContributors">
<li ng-show="TopContributors.length==0">
<p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>
<li ng-repeat="contributors in TopContributors">
<img ng-src="{{contributors.AccountName}}" />
<div class="contName">
<p>{{contributors.UserName}}</p>
</div>
</li>
</ul>

Answer 1

You can add a flag to hide "No Contributors...." until the request is not completed
<li ng-show="TopContributors.length==0 && flag">
<p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>

Answer 2

I think the below code is enough to achieve what you want rather than adding a flag:
<li ng-show="TopContributors && TopContributors.length==0">

Answer 3

In your controller (written in es6, but you get the drift):
export default class MyController extends Base {
constructor() {
super(arguments);
this.loading = true;
this.loadData();
}
loadData() {
// Assumes data loaded correctly;
someCodeLoadingData();
this.loading = false;
}
}
In your template:
<li ng-show="TopContributors.length === 0 && vm.loading === false">
<p>No Contributors....</p>
</li>
Put your styling in a stylesheet, keep your templates clean. The vm (in my case at least) comes from our Base where vm = this;

Answer 4

Use can use ng-cloak to achieve this in case data is not coming from an API using AJAX call. Basically it will wait for the variable to load before performing any function on that div or element
Add ng-cloak to your ng-show statements as shown below:
<ul id="owl-example" class="list-unstyled topContributors">
<li ng-show="TopContributors.length==0" ng-cloak>
<p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>
<li ng-repeat="contributors in TopContributors">
<img ng-src="{{contributors.AccountName}}" />
<div class="contName">
<p>{{contributors.UserName}}</p>
</div>
</li>
</ul>
In your css file write:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
If it is coming using an AJAX call, you can setup a flag while the call is in progress and update it when you achieve success.

Answer 5

The usual suggestion here recommends adding a variable for loading status. I don't think you even need that.
Besides adding ng-cloak to avoid template loading flickering, I'd suggest you default your TopContributors variable to a negative value, this way will ensure your div isn't displayed while you wait for it to load it (from a backend service I'd assume). Example:
function topContributorsController(...) {
$scope.TopContributors = -1; // 'not loaded' state
And here is the change to your template to add ng-cloak:
<ul id="owl-example" class="list-unstyled topContributors" ng-cloak>