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

时间：2022-09-21 16:56:23

　　自己正在做一个小网站，使用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】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

　　而且，每当打开一个新页面，这个警告就会出现一次，说明每次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://*.com/questions/18220197/angularjs-does-not-load-scripts-within-ng-view

　　2. http://*.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的更多相关文章

  1. JS方法调用jQuery内部方法

    转载于:https://blog.csdn.net/tsoTeo/article/details/77848932 已经测试过,可以正常调用!!以下为原文: JS方法能不能调用JQuery里面的方法  ...

  2. 调用jquery&period;Jcrop&period;min&period;js 切割图片 实例

    需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js  <script src="${fileUrlPrx}/scripts/wap/ ...

  3. JS 互相调用iframe页面中js方法、VUE里 iframe 互调方法

    1,父 html 调用子 iframe 内方法: document.getElementById("iframe").contentWindow.func(data1,data2. ...

  4. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. jquery对象和js对象

    <ul id="ul1">   <li id="li_1">01</li>   <li>02</li&gt ...

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

    JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascri ...

  7. android js 互相调用

    代码地址如下:http://www.demodashi.com/demo/13107.html android js 互相调用 第二版 支持js匿名函数接收 支持js json对象接收 支持js函数返 ...

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

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  9. 通过案例来剖析JQuery与原生JS

    首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...

随机推荐

  1. Sql Servicer 复习笔记（1） 存储过程分布

    第一步:创建表 declare @countInt int declare @age int ) begin ),@countInt), @age,'中国北京') ; ; ) begin ; end ...

  2. Zookeeper集群的安装和使用

    Apache Zookeeper 由 Apache Hadoop 的 Zookeeper 子项目发展而来,现已经成为 Apache 的*项目,它是一个开放源码的分布式应用程序协调服务,是Google ...

  3. BZOJ 1087 题解【状压DP】

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3112  Solved: 1816[Submit][ ...

  4. &lbrack;译&rsqb;GotW &num;1&colon; Variable Initialization

    原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...

  5. 更新代码和工具，组织起来，提供所有博文（C&plus;&plus;，2014&period;09）

    为了更容易地管理各种规范和工具所涉及的资源鲍文,现在把这些资源迁移 GitHub 在,趣者可前往下载. C++ 1.<通用高性能 Windows Socket 组件 HP-Socket v3.2 ...

  6. mongoDB 文档概念

    mongoDB 文档概念 什么是文档 文档是 mongodb 基本的数据组织单元,类似于mysql 中的记录 文档由多个键值对组成,每个键值对表达一个数据项 属于 bson 数据 ps:  bson ...

  7. 学习笔记（三）--Lucene分词器详解

    Lucene-分词器API org.apache.lucene.analysi.Analyzer 分析器,分词器组件的核心API,它的职责:构建真正对文本进行分词处理的TokenStream(分词处理 ...

  8. B-树 B&plus;树复习总结

    一.B-树的定义 一棵m阶的B-树或为空树,或为具有以下特性的m叉树 1.树中每个结点至多有m棵子树 (m-1个关键字) 2.根结点至少有两棵子树 (至少有一个关键字) 3.除根节点的分支结点至少有f ...

  9. 24&lowbar;ajax请求&lowbar;使用axios

    前置说明: 1.React本身只关注页面,并不包含发送ajax请求的代码 2.前端应用需要通过ajax请求与后台进行交互(json数据) 3.React应用中需要集成第三方ajax库(或自己进行封装) ...

  10. 敏捷开发的道与术---MPD软件工作坊培训感想（上）

    注:由麦思博(MSUP)主办的2013年亚太软件研发团队管理峰会(以下简称MPD大会)分别于6月15及6月22日在北京.上海举办,葡萄城的部分程序员参加了上海的会议,本文是参会的一些感受和心得. 这次 ...

相关文章