【Angular JS】正確調用JQuery與Angular JS腳本 - 修復Warning: Tired to load angular more than once


  自己正在做一個小網站,使用Angular JS + Express JS + Mongo DB,在開發過程中,遇到一些問題,所以整理出來。希望對大家都有幫助。

  這是今天解決的一個問題,Angular JS拋出Warning: Tired to load angular more than once

  

  前端使用的就是Angular JS,同時前端腳本中我也使用了JQuery。以下是二者Script的最初調用順序,

  在public文件夾下的index.html中:

 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的調用在后。

  但是在頁面調試過程中,我在Chrome Console中看到一條警告信息:

  

  而且,每當打開一個新頁面,這個警告就會出現一次,說明每次Angular JS的腳本都會被再次Load一次

  

  當然不能允許這樣的錯誤出現。

  於是開始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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM