AngularJS $http response long execution

Question

I am using Angular and $http request to get data from server. It is mock data in the same server directory but it return response in 20 sec. It is way to long. The request is executed on application start up. I have tried to execute the same query using jQuery $.ajax, and it worked in 10 ms. But I am want to get rid of jQuery. Why AngularJs $http is taking so long?

I am using Ifeanyi Isitor's Lazy Loading In AngularJS example how to use require.js with angular. loading my first view's controller points to service where query is executed. In chrome dev tools network traking I see it takes less when 10 ms to get file. but using console.time setting it before executing query and ending it at success promise it logs about 20000 ms. Can it be because of lazy loading? but why jQuery is working fast? here is code of my service

define(['appModule'], function(app) {
  app.lazy.factory('daoService', ['$http', function($http) {
    var ...
    ...
    getChanges = function(tableName, modifiedSince, callback) {
        console.log('data access time starts');
        console.time('data access time');
        // this works in 20000 ms
        $http.post(tablesUrl[tableName]).success(function(data) {
                console.log("The server returned " + data.length + " changes);
                console.timeEnd('data access time');
                callback(data);
            }).error(function(data){
                console.log(data);
            });

        /* this works in about 10 ms
        $.ajax({
            url: tablesUrl[tableName],
            dataType:"json",
            success:function (data) {
                console.log("The server returned " + data.length + " changes );
                console.timeEnd('data access time');
                callback(data);
            },
            error: function(model, response) {
                console.log(response);
            }
        });*/
    },

It's impossible to know what is going on without seeing your code, but Angular is not the culprit. — bibs
– bibs, Commented Aug 28, 2013 at 14:02
It could also be something that locks in the front end. Please provide some code to help — bdavidxyz
– bdavidxyz, Commented Aug 28, 2013 at 14:33

Ricardas · Accepted Answer · 2013-09-02 04:35:16Z

1

I have found answer. I was because some things in angular has to be invoked in order to be executes. For that purpose we need to use $apply. Here is the code:

define(['appModule'], function(app) {
    app.lazy.factory('daoService', ['$http', '$rootScope', function($http, $rootScope) {
    var ...
    ...
    getChanges = function(tableName, modifiedSince, callback) {
        $rootScope.$apply(function(){
                $http.post(tablesUrl[tableName], params).success(function(data) {
                    callback(data);
                }).error(function(data){
                    console.log(data);
                    phoneGapApp.showAlert(data.message);
                });   
            });
    },

More about $apply in Jim Hoskins's post

edited Sep 2, 2013 at 4:35

answered Aug 30, 2013 at 10:22

Ricardas

5481 gold badge6 silver badges18 bronze badges

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

2 Comments

Joachim Sauer Over a year ago

This should only be necessary if getChanges is called from outside of Angular (i.e. from a jQuery event or something similar).

Ricardas Over a year ago

Yes, it was implemented as service for accessing data and apparently it got outside of Angular. It was called from controller to get data from SQLite and sync data from server. Somewhere in the chain it got out of Angular.

Collectives™ on Stack Overflow

AngularJS $http response long execution

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related