CODEWITHSUNDEEP
jqueryangularjspug
johnnyaug
johnnyaug

Reputation: 1163

AngularJS page keeps rendering when adding JQuery

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?

Upvotes: 1

Views: 373

Answers (1)

TheSharpieOne
TheSharpieOne

Reputation: 25726

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.

Upvotes: 1

Related Questions