Friday, 15 January 2010

Angularjs $http ajax request slow comparing to Jquery ajax -


I recently started moving from jQuery to AngularJs. The problem I've encountered is that the angular $ http call is actually slower than the jquery AJAX call when I'm requesting Angle's $ http on my server, I get answers 1.7s after 1.3. But when I simplify

  $ Ajax ({type: "POST", url: '? Lang_page = 1'}) .done (function) {});  

The response time is 200ms to 300ms. I do not see much on Chrome Dev Tool CPU profiler page. I tried to debug it, it seems that the problem is in $ HTTPS, I do not have any clocks which are running the deltoaster slow What are the problems? Or is it just Kangaroo super slow?

Chrome profiler view for request:

Chrome profiler view for AJAX response:

main.html:

  & lt; Html & gt; & Lt; Top & gt; Script Data-Main = "/ StaticFile / JS / Required-Pattern .js" src = "/ staticfiles / js / bower_components / requirejs / require.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div ng-controller = "PatternsCtrl" & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Required-pattern. Js:

  is required. Config ({path: {angular: 'bower_comontents / angular / angular', jquery: 'bower_components / jquery / dist / jquery', shim: {'angular': {'export': 'angular'}, 'jquery': { 'Export': '$'},}, Priority: [["angular", 'jquery',], dps: [], callback: blank, baseRour: '/ staticfile / js'}); Function (angular, app, $) {var $ html = angular.element (document.getElementsByTagName ('html') [0]); Angular (['angular', 'jquery', 'pattern.module'], function .element (). Ready (function () .bootstrap ($ html, ['myapp']);});};  

patterns.module.js:

  'strict use'; Define (['angular', 'components / pattern / pattern controller'], function (angle, pCtrl) {return angular module ('mymod', ['mymod.patterns',]);});  

patternsController.js:

  'strict use'; Define ('Pattern', 'Pattern', CTRL); Pattern. CTRL. $ Injection = ['Define' ['Angle'], Function (Cooner), Returned Angle Module ('Maemod Pattern', [ $ Http ']; Function pattern (Ctrl + $ http) {console.log (' Pattern Controller '); $ http ({method:' POST ', url:'? Lang_page = 1 '}) .success (function , Event) {});} ;});  

I have found the problem on Django Debug Toolbar with Django on Backend And angular's $ http request by default does not add the header with " X-Requested " header, where jQuery's AJAX request adds this header. So I've just added this header to angular:

  Angular. Module ('mymod', []). Config (['$ httpProvider', function ($ httpProvider) {$ httpProvider.defaults.headers.common ["x-requested-with"] = 'XMLHttpRequest';}]);  

Response time in angular and now is similar to the jQuery response time.


No comments:

Post a Comment