AngularJS page keeps rendering when adding JQuery

Question

I need to use JQuery in my AngularJS app. When I add it to the main (Jade) page the following way:

script(src="/js/lib/jquery-1.10.2.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js")
script $.noConflict();
script(src="/js/lib/angular.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js")

My login page keeps disappearing and reappearing (i.e. blinking) and the jquery-ui element is added and omitted from the page over and over again, so when using chrome debug tools I see something like that (can't post images yet, sorry):

<script async="" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js?_=1389627589530"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589527"></script>
<script async="" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js?_=1389627589501"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589498"></script>
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589069"></script><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}</style>
<script async="" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js?_=1389627589040"></script>

When I remove jQuery from the dependencies, the page is rendered as expected. What am I doing wrong?

Have you tried not using async and/or placing jquery before angular. — Melbourne2991
– Melbourne2991, Commented Jan 13, 2014 at 16:39
The reason why I need jQuery is for ng-infinite-scroll to work properly. When I place angular before jQuery, the blinking issue is solved, but I go back to my problem of ng-infinite-scroll not working. I assume it tries to use angular's version of jQuery? — johnnyaug
– johnnyaug, Commented Jan 13, 2014 at 17:22
Angular comes with a lite version of jquery but will use regular jquery if added, jquery should come before angularjs as it is a dependency — Melbourne2991
– Melbourne2991, Commented Jan 13, 2014 at 17:35
Right. So that's what I did here and results in the blinking I mentioned. — johnnyaug
– johnnyaug, Commented Jan 13, 2014 at 17:43

TheSharpieOne · Accepted Answer · 2014-01-13 19:05:40Z

It appears that you Angular application is trying to load the root document. The document that contains all of the calls/references to your scripts. The reason it has a problem when jQuery is included is because jQuery knows how to handle scripts in partial views. AngularJS by itself uses jqLite and something basic to load view, which doesn't load scripts. With jQuery, Angular will use jQuery to load views. It sees the scripts and attempts to load them. Part of your scripts when executed tells it to get the root document again, thus looping. This is why you see the same scripts loading over and over again.

You only need the full page once, on load, then partials. Make sure your app only load partial views that do not contain the <head>. If you are using something like Razor, Jade, or something that will include/extend over views to roll up a full page view, you need to disable the feature so that only the partial is returned for the partial calls.

Collectives™ on Stack Overflow

AngularJS page keeps rendering when adding JQuery

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