1.angular.bootstrap使用详解
正常使用angularjs的时候,我们都会在根目录上(html)定义一个ng-app=“myModule”来告诉angular它所要解析的html文档的根节点在什么位置,就像下面的代码可以正确执行。
<!DOCTYPE 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()来解析页面。具体使用如下:
<!DOCTYPE html>
<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>
<pre style="background-color: rgb(255, 255, 255); font-family: "Courier New"; font-size: 12pt;">
这样和上面的效果是一样的。但是使用angular.bootstrap()需要注意一下个问题:
1) 每个页面中建议只有一个angular.bootstrap()应用程序,如果一个页面中包含了多个angular.bootstrap()会带来未知的问题。
2) angular.bootstrap()的第一个参数是document元素,这个元素上最好不要有其他指令。