【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中：
<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
【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once的更多相关文章
- JS方法调用jQuery内部方法
转载于:https://blog.csdn.net/tsoTeo/article/details/77848932 已经测试过,可以正常调用!!以下为原文: JS方法能不能调用JQuery里面的方法 ...
- 调用jquery.Jcrop.min.js 切割图片 实例
需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js <script src="${fileUrlPrx}/scripts/wap/ ...
- JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法
1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2. ...
- 轮播图原生js实现和jquery实现和js面向对象方式实现
原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jquery对象和js对象
<ul id="ul1"> <li id="li_1">01</li> <li>02</li> ...
- jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换
JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascri ...
- android js 互相调用
代码地址如下:http://www.demodashi.com/demo/13107.html android js 互相调用 第二版 支持js匿名函数接收 支持js json对象接收 支持js函数返 ...
- DOM对象和js对象以及jQuery对象的区别
DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...
- 通过案例来剖析JQuery与原生JS
首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...
随机推荐
- [C/C++语言标准] ISO C99/ ISO C11/ ISO C++11/ ISO C++14/ISO C++17 Downloads
语言法典,C/C++社区人手一份,技术讨(hu)论(peng)必备 ISO IEC C99 https://files.cnblogs.com/files/racaljk/ISO_C99.pdf IS ...
- OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理
开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...
- Number BZOJ3275 最大流
有N个正整数,需要从中选出一些数,使这些数的和最大. 若两个数a,b同时满足以下条件,则a,b不能同时被选 1:存在正整数C,使a*a+b*b=c*c 2:gcd(a,b)=1 Sample Outp ...
- pacman命令用法
Pacman 是一个命令行工具,这意味着当你执行下面的命令时,必须在终端或控制台中进行. 1.更新系统 在 Arch Linux 中,使用一条命令即可对整个系统进行更新: pacman -Syu 如果 ...
- spring-redis 存储数据
package com.fndsoft.bcis.utils; import org.springframework.beans.factory.annotation.Autowired;import ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_命名空间和程序集的关系
命名空间和程序集不一定相关 1. 同一个命名空间中的各个类型可能是在不同的程序集中实现的.(System.IO.FileStream在MSCorLib.dll程序集中,而System.IO.FileS ...
- 关于form组件的补充-------formChoice
form组件的Choice字段 还是基于出版社和书的模型来详解 models.py(模型) from django.db import models # Create your models here ...
- day_03 字符串
1.python基础数据类型 1.int整数 2.str 字符串.(不会用字符串保存大量数据) 3.bool 布尔值. TRUE,FALSE 4.list 列表(重点) 存放大量数据 用[]表示 5. ...
- 测试转型之路--学习ing
http://www.importnew.com/27309.html 测试开发工程师 - 抖音方向 职位描述1.深度参与产品研发项目, 协同产品经理.业务研发.用户反馈团队优质交付产品:2.参与质量 ...
- python3 + pycharm+requests+HTMLTestRunner生成不了测试报告html
生成不了测试文件,是运行的方式不对.因为在运行的时候,pycharm默认使用unit-test运行,所以没有生成测试报告.至于为什么会这样子,我就不清楚了,不过想了解更多的朋友,可以百度一下. 解决的 ...