【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

时间 2019-12-12

标签 Angular JS 正确调用 jquery angular 脚本修复 warning tired load 栏目 JQuery 繁體版

原文原文链接

　　本身正在作一个小网站，使用Angular JS + Express JS + Mongo DB，在开发过程当中，遇到一些问题，因此整理出来。但愿对你们都有帮助。html

　　这是今天解决的一个问题，Angular JS抛出Warning: Tired to load angular more than once。前端

　　前端使用的就是Angular JS，同时前端脚本中我也使用了JQuery。如下是两者Script的最初调用顺序，node

　　在public文件夹下的index.html中：jquery

 1 <body ng-view>
 2         <!-- jQuery -->
 3         <script src="lib/jquery/jquery.js"></script>   
 4 
 5         <!-- Angular JS Javascript -->
 6         <script src="lib/angular-1.3.15/angular.js"></script>
 7         <script src="lib/angular-1.3.15/angular-route.js"></script>
 8         <script src="js/app.js"></script>
 9         <script src="js/factory.js"></script>
10         <script src="js/filter.js"></script>
11         <script src="js/directive.js"></script>

　　JQuery的调用在前，Angular JS的调用在后。git

　　可是在页面调试过程当中，我在Chrome Console中看到一条警告信息：angularjs

　　并且，每当打开一个新页面，这个警告就会出现一次，说明每次Angular JS的脚本都会被再次Load一次。github

　　固然不能容许这样的错误出现。app

　　因而开始Google资料，终于找到了问题所在的缘由，缘由是Angular JS框架使用了"轻量级的JQuery" - JqLite来处理页面，Jqlite是不会去执行样式页面（template）中的script脚本，也就是说，若是你只使用了Angular JS脚本，而没有用JQuery，在template html中写的<script></script>是不会被调用的（固然这里的<script>是指放在ng-view被Angular控制的状况下）。框架

　　可是呢，若是你也使用了JQuery，并且关键的是，在Script调用顺序中，若是你把JQuery放在了Angular JS前面调用（例如本文开头时个人作法），Angular JS会检查是否有JQuery存在，若是JQuery存在，则不使用内部的JqLite，所以每次处理ng-view时，<script></script>都会被调用，由此就会抛出警告，每次Angular JS的脚本都会被重复加载，这是十分不可取的。网站

　　所以解决方法是，

　　把JQuery的调用仍旧放在Angular JS的前面，可是把脚本都放在ng-view的外面，例如放在<header>标签中，

　　以下，

 1 　　<head>
 2 　　　　 <!-- jQuery -->
 3         <script src="lib/jquery/jquery.js"></script>    
 4 
 5         <!-- Angular JS Javascript -->
 6         <script src="lib/angular-1.3.15/angular.js"></script>
 7         <script src="lib/angular-1.3.15/angular-route.js"></script>
 8         <script src="js/app.js"></script>
 9         <script src="js/factory.js"></script>
10         <script src="js/filter.js"></script>
11         <script src="js/directive.js"></script>
12     </head>
13 　　 <body ng-view>

　　这样的话，在每次处理ng-view时候，JQuery就不会执行里面的Script，历来不会致使Angular JS脚本被加载屡次。

　　固然，还有另一个方法，就是把全部的script调用仍在<body>中，但将JQuery和Angular JS的顺序调整，将JQuery放在Angular JS下面调用。但这样很差，缘由是Angular JS仍使用内部的JqLite，致使若是你想在Template Html中执行<script>变得不可能。

总结：

　　在Google时，发现这个问题仍是蛮多人遇到的。本身也花了不少时间，最后才找到根本缘由。但愿对你们有帮助。

　　这个解决方法我也是Google得来，下次有空要去了解下Angular JS的源码，来验证下JqLite的具体状况。

参考：

　　1. http://stackoverflow.com/questions/18220197/angularjs-does-not-load-scripts-within-ng-view

　　2. http://stackoverflow.com/questions/27050158/warning-tried-to-load-angular-more-than-once-because-of-jquery-why

　　最后附上个人GitHub地址https://github.com/kevinsong1990/nodejs-blog，里面有这个问题描述，在Issue里面，感兴趣的朋友能够去看下，多提意见，谢谢。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 - Kevin Song

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 2015-07-29