AngularJS和jQuery的加载过程

最新推荐文章于 2019-08-13 07:53:30 发布

nphyez

最新推荐文章于 2019-08-13 07:53:30 发布

阅读量2.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/nphyez/article/details/82795703

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

AngularJS和jQuery的加载过程

1. 只加载AngularJS框架

如下web页面，在只引入angularjs框架而不引入jQuery框架的情况下，点击jnjector按钮将报错：
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

<html>
  <head>
    <script src="angular-1.2.25.js"></script>
    <script>var myModule = angular.module('myModule', []);
      myModule.controller("ctrl_1",
      function($scope, $injector) {
        $scope.test = function() {
          var t = angular.element("#btn").injector();
          alert(t == $injector);
        }
      });

      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById("div1"), ["myModule"]);
      });</script>
  </head>
  
  <body>
    <div id="div1" ng-controller="ctrl_1">
      <input id="btn" type="button" value="injector" ng-click="test();">
    </div>
  </body>
</html>

angular不支持通过类似jquery的选择器获取元素，所以angular.element("#btn")报错。

如果不想shiyongjQuery，可以使用html5中的document.querySelector()，该api支持选择器。

2. 同时加载jQuery和AngularJS框架

引入jquery框架选择元素会很方便：

var t = $("#btn").injector;

需要注意的是：如果页面中同时既使用了jQuery和AngularJS框架，需要先加载jQuery框架，之后加载AngularJS框架。

这是因为：
Angular JS框架内部使用了"轻量级的JQuery" - JqLite来处理页面。如果你也使用了JQuery，就要把JQuery放在了Angular JS前面调用，Angular JS会检查是否有JQuery存在，如果JQuery存在，则不使用内部的JqLite。

如果先加载AngularJS框架，后加载jQuery框架。如下web页面：

<html>
  <head>
    <script async="" src="https://fex.bdstatic.com/hunter/alog/dp.min.js?v=-17795-17795"></script>
    <script src="angular-1.2.25.js"></script>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        var myModule = angular.module('myModule', []);  
        myModule.controller("ctrl_1",function($scope,$injector){
            $scope.test = function(){
                var t = $("#btn").injector();
                alert(t==$injector);
            }
        });	
		
        $(function(){
            angular.bootstrap($("#div1")[0], ["myModule"]);  
         })
    </script>
  </head>
  <body>
    <div id="div1" ng-controller="ctrl_1">
        <input id="btn" type="button" value="injector" ng-click="test();">
    </div>
  </body>
</html>

执行将提示异常：TypeError: $(…).injector is not a function

3. 如何保证jQuery加载完再加载AngularJS

4. jQuery或AngularJS框架重复加载的问题

案例1 Warning: Tired to load angular more than once

参考：https://www.cnblogs.com/KevinSong/p/4686650.html

5. 几个方法

angular.element()
将DOM元素或者html字符串封装成一个jquery对象，但不接受像jquery那样使用选择器查找元素。
1）如果页面引入了jQuery框架，和jQuery中的$用法基本相同

angular.element("#elem")

2）如果页面没有引入jQuery框架，angular.element()可以调用Angular中嵌入的精简版的jQuery library（“jqLite”），只能使用DOM元素或者HTML字符串作为参数。

angular.element(document.querySelector("elem"))  
angular.element('<div id="elem">xxxx</div>').html()

jqLite provides only the following jQuery methods:
addClass()
after()
append()
attr()
bind() – Does not support namespaces, selectors or eventData
children() – Does not support selectors
clone()
contents()
css()
data()
empty()
eq()
find() – Limited to lookups by tag name
hasClass()
html()
next() – Does not support selectors
on() – Does not support namespaces, selectors or eventData
off() – Does not support namespaces or selectors
one() – Does not support namespaces or selectors
parent() – Does not support selectors
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler() – Passes a dummy event object to handlers
unbind() – Does not support namespaces
val()
wrap()

angular.bootstrap(element, [modules], [config]);
正常使用angularjs的时候，我们都会在根目录上（html）定义一个ng-app=“myModule”来告诉angular它所要解析的html文档的根节点在什么位置，就像下面的代码可以正确执行。

<html lang="en"  ng-app="myModule" ng-strict-di>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        i add {{1+2}}
        <script src="../js/angular.min.js"></script>
        <script>
            angular.module("myModule",[])
        </script>
    </body>
</html>

当我们不需要自动加载页面的时候，手动执行angular.bootstrap()来解析页面。具体使用如下：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        i add {{1+2}}
        <script src="../js/angular.min.js"></script>
        <script>
            angular.module("myModule",[])
            angular.element(document).ready(function() {
                angular.bootstrap(document, ['myModule']);
            });
        </script>
    </body>
</html>

这样和上面的效果是一样的。但是使用angular.bootstrap()需要注意一下个问题：
1）每个页面中建议只有一个angular.bootstrap()应用程序，如果一个页面中包含了多个angular.bootstrap()会带来未知的问题。
2） angular.bootstrap()的第一个参数是document元素，这个元素上最好不要有其他指令。

nphyez

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS和jQuery的加载过程

AngularJS和jQuery的加载过程1. 只加载AngularJS框架如下web页面，在只引入angularjs框架而不引入jQuery框架的情况下，点击jnjector按钮将报错：Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!&amp;lt;html&amp;gt; &amp;lt;...
复制链接

扫一扫

专栏目录