【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

时间: 2024-10-28 11:03:20

【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once的相关文章

调用jquery.Jcrop.min.js 切割图片 实例

需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js  <script src="${fileUrlPrx}/scripts/wap/jquery.min.js"></script>  <script src="${fileUrlPrx}/scripts/wap/jquery.Jcrop.min.js"></script> 注意几个隐藏域,这些是选中区域的点坐标,与长宽

HTML 页面调用 Jquery 也就是.js文件的函数

正常的在js文件中写一个函数 function  test1(){ alert("这样是调用不到的"); } 只有这样声明才能调用到 test=function(){ alert("可以调用"); } 然后在 html 页面中 <script> test();   这样就调用成功了 </script> html页面调用js文件里的函数,写法必须为test= function (){}形式,其他方式写无用. 原文地址:https://www.c

使用jquery.i18n.properties.js实现js国际化

前两天接到一个任务,把之前的做过的一个系统实现国际化,之前的系统用的是Spring框架,国际化还是比较简单的.但是有一些提示是写在js文件里面的,搜了一些,发现一个js国际化的框架jquery.i18n.properties.js,用了一些还是比较方便的. 首先引入js文件,这个框架是依赖jquery的,所以jquery也要先引入,由于项目用了requireJs,所以在main文件里引入一下就可以了 require.config({     baseUrl: contextPath + "/js

jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascript开发 jQuery能做的javascript都能做到,而JavaScript能做的事情,jQuery不一定能做到 jQuery文件的引入 <body> <div class="box"></div> <!--引包(引入jquery库)-->

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用

【微信】微信小程序 微信开发工具 创建js文件报错 pages/module/module.js 出现脚本错误或者未正确调用 Page()

创建报错pages/module/module.js 出现脚本错误或者未正确调用 Page() 解决方法: 在js文件中添加 Page({ }) 原文地址:https://www.cnblogs.com/sxdcgaq8080/p/9076274.html

Jquery 调用iframe中的js

在工作中要在html中嵌入iframe 并且调用其中的js方法. 网上找的demo都是 html中一个点击事件的方法中调用到iframe中的js. 点击触发后,此时iframe早已被渲染完成,所以这么干是可行的. 现在我遇到的情况是在没有任何操作的前提下,html加载后就调用iframe中的js. 以下利用到 Jquery的load()方法,待iframe加载完成后,调用其js. parent.html 1 <!DOCTYPE html> 2 <html> 3 <head&g

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

JS学习记录(jQuery)

jQuery入门<html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery入门</title> </head> <body> <p id="content" class="first">青岛理工大学</p> <p id="content2&qu