一、 bootstrap
1.自动初始化
Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：
加载与module相关的directive。
创建应用相关的injector（依赖管理器）。
以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非<html>）作为根节点，从而限制angular的作用范围
2.手动初始化
页面没有ng-app指令 使用angular.bootstrap()（
angular.bootstrap(angular.element(document.getElementById(ID));
）方法
如果页面有多个ng-app指令，只有第一个会起作用，其余的要手动bootstrap
二、ngCloak
在使用表达式{{}}时有时会出现闪烁的问题
1.使用ng-bind指令
2.使用ng-cloak指令
angular会在DOM加载完后去解析html view Template，在一些快速浏览器中会在angular解析之前dom就已经显示了所以就会出现闪烁的问题
使用ngCloak指令解决
<div class="ng-cloak" ng-cloak>{{angular}}</div>
angular在初始化的时候会在DOM的header中添加css代码。angular将带有ng-clock的的元素设置为display:none，隐藏掉，在等到angular解析到带有ng-clock的节点时候，会把attribute和class同时remove掉，元素显示，这样就可以实现防止节点的闪烁。
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
</style>
使用ngCloak时有时还是会有闪烁问题：原因是浏览器的速度比angular在head中加入css的速度还快，在angular添加css代码之前dom就已经显示了。解决办法就是自己在header中添加自己的css代码
.ng-cloak{
display:none;
}
时间： 2024-10-13 19:27:14