Preloading Data and HTML Before Executing `ng-view` In AngularJS

Question

In my app, I like to integrate a stuff for ng-view. Basically, after user click on the link, I would like to stop the ng-view upto:

load all data what the page requires
after all data loaded, create necessary DOM element

Then, let em ng-view execute. up to that point, let me show the pre-loader icon or some message say 'wait..`

what is the correct way to do this?

At present without any idea, I using my route like this.

$routeProvider
            .when ("/issueDetails", {
                templateUrl : "views/issueDetails/issueDetails.html",
                controller  : "issueDetailsController",
                className   : "body-issueDetails",
                resolve: {
                  // I will cause a 2 second delay
                delay: function($q, $timeout) {
                    var delay = $q.defer();
                    $timeout(delay.resolve, 2000); //delaying 2 sec.
                    return delay.promise;
                  }
                }
        });

But it's not produces such a good result. any one show me the right direction please?

Why do you introduce an arbitrary delay in resolve, instezd of actually resolving the data that your view needs? That's what it's for. Load the necessary data in resolve. Read code.angularjs.org/1.4.9/docs/api/ngRoute/provider/… — JB Nizet
– JB Nizet, Commented Jan 23, 2016 at 11:59
ok. But still I am getting jurking on the ng-view - since there is no.of DOM need to created. — 3gwebtrain
– 3gwebtrain, Commented Jan 23, 2016 at 12:00
it's not clear what you are trying to accomplish. It's very hard to answer a question that asks "How do I wait for data to load before continuing" when the sample code provided isn't listing any data. Also, you seem to be asking about creating DOM items before angular does, which isn't really how angular works. Create a sample plunker that demonstrates your issue. — Claies
– Claies, Commented Jan 23, 2016 at 12:48

Beartums · Accepted Answer · 2016-01-23 18:08:34Z

1

If I'm understanding you correctly, this should happen in the html in your view.

<div ng-if="!DataImWaitingFor">
    ...Please wait while my data is fetched
</div>
<div ng-if="DataImWaitingFor">
    [all the cool stuff that makes this page worth looking at]
</div>

Or just put them in different files and use ng-include.

Maybe I'm misunderstanding, but I don't see why you would need to delay the view itself. Maybe if you could explain why this doesn't work for you, I'll have a better idea how to help.

answered Jan 23, 2016 at 18:08

Beartums

1,3501 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Preloading Data and HTML Before Executing `ng-view` In AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related