我有一个工作的helloworld类型的应用程序,但是一旦页面加载,模板代码就会瞬间可见。阻止这种情况发生的最佳方法是什么?
答案 0 :(得分:2)
您应该使用ngCloak指令:
ngCloak指令用于防止Angular html模板 由浏览器以原始(未编译)形式简要显示 在您的应用程序加载时。使用此指令可以避免 由html模板显示引起的不良闪烁效应。
答案 1 :(得分:0)
一个选项可能是将加载图像添加到来自控制器的json对象的ajax调用的post请求中。在数据来自控制器之前,这将显示加载程序而不是代码。除此之外你可以看看ngCloak指令:
答案 2 :(得分:0)
ngCloak
只有在你的应用停留在"Hello World!"
阶段才有用,但随着它的增长,ngCloak
只是AngularJS性能瓶颈的另一个难题。
ngCloak
指令实际上是做什么的,它在ngCloak attribute/class
元素中为<head>
添加了样式,这些样式来自AngularJS lib .js
文件。因此,如果您的页面非常繁重(不仅仅是HelloWorld),那么表达式模板代码将一直持续到AngularJS加载为止。
见这里:http://run.plnkr.co/plunks/8IWriNwkzQ2RWmrrQkwC/
我已经延迟5秒加载Angular,尽管页面上显示ngCloak
个表达式。
那么如何解决?
将class="ng-cloak"
添加到正文中,并将此样式与CSS文件保持一致:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
一旦加载了角度js并且模板,表达式被编译,angular就会删除这个类!一切都变得快乐。