0

I am using Angularjs and JQuery in the same project. When using Angularjs and JQuery in the same project, it is a convention that JQuery has to be loaded first and then AngularJS as follows:

<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/angular.js"></script>

But it causing some problem as when page load, some html element hidden with AngularJS ng-hide directive becomes visible (for a while/during the time of JQuery load) until AngularJS load.

Problem will be solved if I can load AngularJS before JQuery!!

Is it somehow possible to load AngularJS before JQuery or any other solution for solving the problem described above.

Any suitable solution will be highly appreciated!!

TanvirArjel
  • 30,049
  • 14
  • 78
  • 114

3 Answers3

2

There is a directive ng-cloak specifically for this purpose.

Just assign it along with ng-show/ng-hide elements on your first view.

<div ng-show="condition" ng-cloak>hello</div>
<div ng-hide="condition" ng-cloak>world</div>
Icycool
  • 7,099
  • 1
  • 25
  • 33
  • Give an simple please! – TanvirArjel Nov 30 '16 at 09:30
  • Add this to your stylesheet if you aren't loading AngularJs in the `` section: `[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }` to avoid flicker – K Scandrett Dec 01 '16 at 04:13
0

You can run JQuery in noConflict mode.

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

<!-- Putting jQuery into no-conflict mode. -->
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script>

var $j = jQuery.noConflict();
sreeramu
  • 1,213
  • 12
  • 19
0

Try to use settimeout function in angularjs or jquery functions which can be loaded after all basic html are loaded i.e try to set time(say 1000 or 2000) value for angularjs functions after html loaded

see setTimeout function page for usage

vaishnavi
  • 11
  • 4