How to load data from angular?

Question

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.

After some moment, it shows proper content

a quick fix to this can be `ng-cloak`. this hides those angular expression till they are parsed and populated by angularjs. — Yogesh, Jun 13 '16 at 13:30
This has been asked to many times check this answer http://stackoverflow.com/questions/23453396/is-there-a-different-way-to-hide-a-scope-variable-from-showing-while-angularjs-i — Efx, Jun 13 '16 at 13:32
Do not use evaluation expressions in visible part of the DOM. This is very good point from behalf of different sides — Drag13, Jun 13 '16 at 13:44

score 2 · Answer 1 · answered Jun 13 '16 at 14:25

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>

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

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.

edited May 23 '17 at 12:15

Community

1
1

answered Jun 13 '16 at 13:42

Łukasz

2,131
1
13
28

This works how can I apply loader that load on every page ? – Anand Jain Jun 13 '16 at 14:07
Have you tried ` ... ` in index.html? – Łukasz Jun 13 '16 at 14:10
That I have tried but it's a bad format to load content it shows first header logo then body button, footer, then header menus bla bla . .. .......I need first show a loader and once all content loaded on page then to show page content and images. – Anand Jain Jun 13 '16 at 14:12
As it is stated it is better to apply `ng-cloak` to small portions of the page to permit progressive rendering of the browser view. So it's better to add it not globaly, but in places (elements) where it's needed. – Łukasz Jun 13 '16 at 14:14
Okay, do you have any idea to show loader and once th content ready to load then only show content with images using angular js ? like https://breather.com/locations/new-york – Anand Jain Jun 13 '16 at 14:18
Just edited post. As it's stated, See http://stackoverflow.com/a/21295787/4989081. – Łukasz Jun 13 '16 at 14:27
well, that will require to setup angularjs routing with your page divided in views. Then you can do it while configuring route using resolve property. refer this link for better idea https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#route-resolve-promises – Yogesh Jun 13 '16 at 14:29

How to load data from angular?

2 Answers2