我有一个AngularJS的项目，我想阻止FOUC上一个类名页面加载过程中。 我读过有关NG-模板，但只有一个标签中的内容似乎是有用的。
<body class="{{ bodyClass }}">
我想它是在页面加载“登录”。 任何策略呢？ 还是我只是要捏造，并加载它作为“登录”，然后手动使用JavaScript来调整DOM只是这个实例。
Answer 1:
你所寻找的是ng-cloak 。
你必须添加它是这样的：
<body class="{{ bodyClass }}" ng-cloak>
这将避免不必要的闪烁。
链接到这个文档。
编辑：
它也建议把下面的代码片段到你的CSS文件，根据文件。
“为了获得最佳结果，angular.js脚本必须在HTML文档的头部部分加载;或者，CSS规则上述必须被包括在该应用程序的外部的样式表”。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Answer 2:
其中一个，你面临的问题是，浏览器会显示<body>元素AngularJS已加载并开始操纵DOM之前。 别人怎么说，大约ng-class是正确的，它会做正确的类应用，但你仍然需要不显示任何东西前角已准备就绪。
在角的早期版本中，你可以这样做：
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
在最近的版本，因为这不工作，但ng-show通过添加和删除不其知名度ng-hide类（比元素属性不太具体）
我最近一直在做这样的：
<head>
...
<style> <!-- Or you could include this in an existing style sheet -->
.ng-cloak {
display: none !important;
}
</style>
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">
这样做，这样意味着， <body>将立即被样式隐藏ng-cloak类。 当角不启动，将处理所有的指令包括ng-class和ng-cloak ，让你<body>元素届时将有合适的班级和可见。
在这里阅读更多NG-斗篷指令
Answer 3:
还有就是纯CSS闪光问题是防弹的解决方案。 对于类您的应用程序的根元素的添加以下。 此解决方案的工作原理是处理的顺序：一切都隐藏在CSS，角被加载，然后CSS显示该应用根。 我喜欢这样，如果有页面上的其他非角元素都会先渲染使页面看起来加载速度更快使用此。
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
就在身体末端添加脚本引用和一些内联CSS：
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
Answer 4:
除了使用类的，你应该用纳克级
<body ng-class="{{ bodyClass }}">
Answer 5:
我注意到有时甚至NG-斗篷似乎不实际工作。 也许我做错了什么。
<body ng-cloak class="{{ bodyClass }}">
我也做类似@mbokil可以默认隐藏元素多了一个小的事情。 通过使用属性选择目标与属性NG-斗篷的任何元素你能够利用角度指令。 这样做有几个好处，但主要的好处是，一旦角大火它删除此属性将触发重绘。
<style>
[ng-cloak] {
display:none;
}
</style>
文章来源: AngularJS strategy to prevent flash-of-unstyled-content for a class
