【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