CODEWITHSUNDEEP
javascriptangularjsajaxhttp
George Bora
George Bora

Reputation: 1650

Angular: How can I stop my $http calls from blocking the UI?

In my controller I have the following code:

PartnersService.GetNonPartnerBanks().success(function (data) {
        vm.nonPartnerBanksList = data;
    }).error( function () {
        vm.nonPartnerBanksList = [];
    });

Which calls this service:

service.GetNonPartnerBanks = function() {
            var nonPartnerBankUrl = config.baseUrl + 'public/nonPartnerBanks';
            return $http.get(nonPartnerBankUrl);
        };

This all works but if the server takes longer to reply, the application's UI freezes up.

What am I doing wrong doesn't the $http service use AJAX and promises so that the rendering of the UI should continue while the call is being made ?

The part of the template which uses the data:

<ol class="nya-bs-select nya-dashboard"
    required

    name="futurePartner"
    id="futurePartner"
    ng-model="npc.futurePartner"
    data-size="5"
    ng-change="npc.hideSucessMessage()"
    title-tpl="<span>{{npc.partnerSelectTitle}}</span>"
    deep-watch="true"
    no-search-title-tpl="<span>{{'general.NoSearchResult' | translate}}</span>"
    data-live-search="true">
    <li nya-bs-option="bankItem in npc.futurePartnerList" data-value="bankItem.id">
        <a>
            {{bankItem.name}}
        </a>
    </li>
</ol>

Follow up:

Vita's answer put me on the right trail, it wasn't that $http blocked my UI, I had an animation on ajax calls which gave the impression of the Ui freezing up

Upvotes: 5

Views: 3411

Answers (1)

V&#237;ťa Plšek - angular.cz
V&#237;ťa Plšek - angular.cz

Reputation: 1503

$http calls are asynchronnous, it returns promise, you can use .then and .catch as ussual on it (success and error callbacks are there just for historical reasons and they are deprecated)

But even them are not blocking your UI, it has to be something different.

What does the "freeze" means?

From where is the method called? Do you use it in route obejct resolve attribute? If yes - then its the feature of it - its waiting for all promises to be fullfiled.

Definitelly problem is somewhere else. Can you provide more information? Or even better some jsbin?

Upvotes: 2

Related Questions