CODEWITHSUNDEEP
javascriptangularjs
Anand Jain
Anand Jain

Reputation: 819

How to load data from angular?

I am new in working on angular js, while loading data sometimes on firefox it shows variable name and after few section it shows the content of that variable in a proper way. How can I load this data or how can I apply loader to load data. As you can view in below screenshot.

enter image description here

After some moment, it shows proper content enter image description here

Upvotes: 0

Views: 124

Answers (2)

Łukasz
Łukasz

Reputation: 2171

Use ng-cloak. It goes like that:

CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

HTML:

<body ng-cloak> ... </body>

will work, but it will hide whole body. https://docs.angularjs.org/api/ng/directive/ngCloak:

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

so it's better to apply ng-cloak to particular elements:

<div ng-cloak> ... </div>
<div ng-cloak> ... </div>

Here is well described how to add loading info.

Upvotes: 1

Yogesh
Yogesh

Reputation: 1585

To show a loading screen while data is being loaded you can write a custom directive.

// directive

app.directive('loading', ['$http', function ($http) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);

Use it like this

<body>
<!-- apply style/css to below div to cover entire page/element on which you want to show loader -->
<div loading>
<!-- add an image tag here with src as any loading gif image -->
</div>
</body>

Upvotes: 2

Related Questions