使用 JQuery 时如何首先加载 AngularJS答案

【问题标题】：How to load AngularJS first when using JQuery as well使用 JQuery 时如何首先加载 AngularJS
【发布时间】：2017-04-14 07:23:16
【问题描述】：

我在同一个项目中使用 Angularjs 和 JQuery。在同一个项目中使用 Angularjs 和 JQuery 时，约定先加载 JQuery，再加载 AngularJS，如下所示：

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

但它会导致一些问题，因为当页面加载时，AngularJS ng-hide 指令隐藏的一些 html 元素变得可见（一段时间/在 JQuery 加载期间），直到 AngularJS 加载。

如果我能在 JQuery 之前加载 AngularJS，问题就解决了！！

是否有可能在 JQuery 或任何其他解决上述问题的解决方案之前加载 AngularJS。

任何合适的解决方案都将受到高度赞赏！

【问题讨论】：

我的第一个问题是：如果您使用 Angular，为什么要使用成熟的 jQuery？
对于一些 JQuery 动画！！
我猜你尝试切换脚本标签的顺序，对吧？
是的！但是 Jquery 就不行了！！
您应该在加载时初始化您的组件，以便在它们都加载后调用该函数。 stackoverflow.com/questions/18646756/…

标签： javascript jquery angularjs

【解决方案1】：

有一个指令ng-cloak 专门用于此目的。

只需在您的第一个视图中将其与 ng-show/ng-hide 元素一起分配即可。

<div ng-show="condition" ng-cloak>hello</div>
<div ng-hide="condition" ng-cloak>world</div>

【讨论】：

请给个简单的！
如果您没有在 <head> 部分加载 AngularJs，请将其添加到您的样式表中：[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 以避免闪烁

【解决方案2】：

您可以在 noConflict 模式下运行 JQuery。

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();

【讨论】：

【解决方案3】：

尝试在 angularjs 或 jquery 函数中使用 settimeout 函数，该函数可以在加载所有基本 html 后加载，即尝试在加载 html 后为 angularjs 函数设置时间（比如 1000 或 2000）值

see setTimeout function page for usage

【讨论】：