自己正在做一個小網站,使用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