一、总括
本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化。
二、Angular <script> 标签
本例用于展示如何通过推荐的路径整合Angular,实现自动初始化。
<!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html>
<html ng-app>
<html xmlns:ng="http://angularjs.org">
三、自动初始化
Angular会在DOMContentLoaded事件中自动初始化,Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到,Angular会做以下事情:
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap-auto</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
这里是ng-app外面的~~{{1+2}}
<div ng-app class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>
注:里面的”ng-cloak”,这个是用于在angular.js编译完成之前(对!没错!是编译完成之前,不是angularjs加载完成之前。所以,如果想很好地避免这个情况,最好的办法是优化应用的加载流程,或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器,所以最好使用class=”ng-cloak”的方式。编译完成后,这个class或属性会被删除。)隐藏模版,避免在页面显示原模版。
四、手工初始化
如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作),那么我们可以用一个手工调用的启动方法去代替。
以下例子等同于使用ng-app这个directive:
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap-manual</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
这里是ng-app外面的~~{{1+2}}
<div id="rootOfApp" class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.getElementById("rootOfApp")));
});
</script>
</body>
</html>
原文:http://www.cnblogs.com/wangchang2015/p/4859993.html