【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once
2015-07-29 17:45
639 查看
自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来。希望对大家都有帮助。
这是今天解决的一个问题,Angular JS抛出Warning: Tired to load angular more than once。
前端使用的就是Angular JS,同时前端脚本中我也使用了JQuery。以下是二者Script的最初调用顺序,
在public文件夹下的index.html中:
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>标签中,
如下,
这样的话,在每次处理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
这是今天解决的一个问题,Angular JS抛出Warning: Tired to load angular more than once。
前端使用的就是Angular JS,同时前端脚本中我也使用了JQuery。以下是二者Script的最初调用顺序,
在public文件夹下的index.html中:
<body ng-view> <!-- jQuery --> <script src="lib/jquery/jquery.js"></script> <!-- Angular JS Javascript --> <script src="lib/angular-1.3.15/angular.js"></script> <script src="lib/angular-1.3.15/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/factory.js"></script> <script src="js/filter.js"></script> <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>标签中,
如下,
<head> <!-- jQuery --> <script src="lib/jquery/jquery.js"></script> <!-- Angular JS Javascript --> <script src="lib/angular-1.3.15/angular.js"></script> <script src="lib/angular-1.3.15/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/factory.js"></script> <script src="js/filter.js"></script> <script src="js/directive.js"></script> </head> <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
相关文章推荐
- 如何使用jQuery技术开发ios风格的页面导航菜单
- jquery中的each
- jquery插件大全
- jquery中attr和prop的区别
- JQuery.on()事件绑定
- 会用到的 多文件 flash上传 Web前端 推荐一个Jquery 插件 Uploadify
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
- jquery轮播图
- jquery中attr和prop的区别
- jQuery学习之元素包装集
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
- 利用jQuery扩展接口为jQuery框架定义了两个自定义函数,然后调用这两个函数
- jquery的$.extend和$.fn.extend作用及区别
- jQuery动画效果(show与hide/toggle/slideUp/slideToggle/fadeIn/fadeTo)
- DOM或Jquery修改HTML标题内容遇到的问题
- jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)
- jQuery选择器
- jQuery插件-div中滚动图片
- jQuery选择器大全
- JQuery mobile 实例 api