自己正在做一个小网站,使用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的更多相关文章

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

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

  2. 调用jquery.Jcrop.min.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> ...

  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. 11.Find All Numbers Disappeared in an Array(找出数组中缺失的数)

    Level:   Easy 题目描述: Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements ...

  2. 牛客寒假算法基础集训营4 F Applese 的大奖

    链接:https://ac.nowcoder.com/acm/contest/330/H来源:牛客网 Applese 和它的小伙伴参加了一个促销的抽奖活动,活动的规则如下:有一个随机数生成器,能等概率 ...

  3. Xcode上传appstore 出现 Found an unexpected Mach-O header code: 0x72613c21 错误

    网上说是静态库的问题

  4. django权限二(多级菜单的设计以及展示)

    多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...

  5. PreparedStatement是如何防止SQL注入的?

    为什么在Java中PreparedStatement能够有效防止SQL注入?这可能是每个Java程序员思考过的问题. 首先我们来看下直观的现象(注:需要提前打开mysql的SQL文日志) 1. 不使用 ...

  6. 在新项目下使用rbc权限

    例子说明: 8 个步骤 1. 拷贝rabc这个app到项目中 2. 把迁移过来的rbac下migrations记录删除 3. 把rabc注册到项目中 4. 创建数据库迁移 5. 注册admin,录入数 ...

  7. 关于KEIL下的图形化显示和输出问题

    一 keil自带的虚拟示波器:只能在软件仿真下使用:右边的这个可以查看变量. 二 SEGGER的工具软件: 1 RTT:可以进行日志输出调试信息输出,需要配置工程,但不占用串口. 2 JSCOPE:可 ...

  8. (转)mkpasswd 的使用

    原文:http://blog.csdn.net/u010339879/article/details/69788032 这个命令是随机生成 密码的一个工具, 如果没有这个命令,请安装相应的包. yum ...

  9. LeetCode 704.二分查找(C++)

    给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target  ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1. 示例 1: 输入: num ...

  10. pat1043. Is It a Binary Search Tree (25)

    1043. Is It a Binary Search Tree (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...