【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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java开发

IntelliJ IDEA2017 + tomcat 即改即生效 实现热部署

2.点击deployment查看Deploy at the server startup 中tomcat每次所运行的包是 xxxx:war 还是其他,如果是xx...

11920
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第十六天 EasyUI【悟空教程】

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

26820
来自专栏前端新视界

构建通用的 React 和 Node 应用

原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者...

32770
来自专栏逸鹏说道

Linux下搜狗输入法和快捷键Ctrl+Space冲突的解决

把搜狗的启动快捷键给删了(如果有两个键盘【英+中】,你按Shift就可以切换了,完全没必要占着茅坑)

13840
来自专栏企鹅号快讯

这么多前端优化点你都记得住吗?

围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕 PC 浏览器和移动端浏览器的优化策略进行罗列 注意,是罗列不是展开,遇到不会不懂的点还请站外扩展 开车速...

24850
来自专栏大数据钻研

Meta标签的那些事

Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。它可用于浏览器(如何显示...

28350
来自专栏Seebug漏洞平台

Firefox - SVG cross domain cookie vulnerability

SVG - 通过 img 标签设置跨域 cookie 我最近有了解到,浏览器允许使用 meta 标签来设置 cookie 。我不确定我是不是忘了这一特性,或者之...

29960
来自专栏编程微刊

微信小程序踩坑记

在创建项目->添加项目时选择的项目目录的文件夹下不能有次级文件夹,如果有次级文件夹 即便是空文件,也会报如上的错误,在选择项目时,应该把程序项目中的顶级文件夹作...

16540
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

71720
来自专栏散尽浮华

Linux终端复用神器-Tmux使用梳理

Tmux是一个优秀的终端复用软件,类似GNU Screen,但来自于OpenBSD,采用BSD授权。使用它最直观的好处就是,通过一个终端登录远程主机并运行tmu...

238100

扫码关注云+社区

领取腾讯云代金券