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元素,这个元素上最好不要有其他指令。