zoukankan      html  css  js  c++  java
  • 【Angular JS】正确调用JQuery与Angular JS脚本

      自己正在做一个小网站,使用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

  • 相关阅读:
    Visual Studio 2010使用Visual Assist X的方法
    SQL Server 2000 评估版 升级到 SQL Server 2000 零售版
    双网卡多网络单主机同时访问
    开发即过程!立此纪念一个IT新名词的诞生
    delphi dxBarManager1 目录遍历 转为RzCheckTree2树
    5320 软件集合
    delphi tree 从一个表复制到另一个表
    DELPHI 排课系统课表
    长沙金思维 出现在GOOGLE的 金思维 相关搜索里啦!!
    如何在DBGrid的每一行前加一个单选框?
  • 原文地址:https://www.cnblogs.com/KevinSong/p/4686650.html
Copyright © 2011-2022 走看看