Javascript AngularJS：如何预防；代码闪光“；加载时在页面中
我用AngularJS创建了一个简单的应用程序。当我打开页面一秒钟时，我会看到下面的屏幕： 但是，加载完成后，我看到加载和样式化的内容，这很好： 如何防止AngularJS代码在我的页面上闪现？这与FOUC有关吗 以下是HTML代码：Javascript AngularJS：如何预防；代码闪光“；加载时在页面中,javascript,angularjs,zurb-foundation,fouc,Javascript,Angularjs,Zurb Foundation,Fouc,我用AngularJS创建了一个简单的应用程序。当我打开页面一秒钟时，我会看到下面的屏幕： 但是，加载完成后，我看到加载和样式化的内容，这很好： 如何防止AngularJS代码在我的页面上闪现？这与FOUC有关吗 以下是HTML代码： <!doctype html> <html class="no-js" lang="en" ng-app="MainApp"> <head> <meta charset="utf-8" /> &
<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style>
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="left tab-bar-section">
<h1 class="title">Salary Calculator</h1>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Location</label>
</li>
<li><a href="#">United Kingdom</a>
</li>
</ul>
</aside>
<section class="main-section">
<div class="row full-width">
<div class="large-4 columns">
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Annual Salary</a>
</li>
<li class="tab-title"><a href="#panel2">Monthly Expenses</a>
</li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Salary" ng-model="salary"/>
</div>
</div>
</div>
<div class="content" id="panel2">
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Rent" ng-model="rent" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Wireless, TV, Home Phone" ng-model="telecom"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="TV License" ng-model="tv" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Mobile Phone" ng-model="mobile"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Subscription" ng-model="subscription"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Electricty" ng-model="electricity" />
</div>
</div>
<div class="row">
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Food" ng-model="food"/>
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Transport" ng-model="transport" />
</div>
<div class="large-4 columns">
<input ng-change="calculate()" type="text" placeholder="Charity" ng-model="charity"/>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input ng-change="calculate()" type="text" placeholder="Other" ng-model="other"/>
</div>
</div>
</div>
</div>
</div>
<div class="large-8 columns" ng-cloak >
<table >
<thead>
<tr>
<th width="200"></th>
<th width="250">Yearly</th>
<th width="250">Monthly</th>
<th width="250">Weekly</th>
<th width="250">Daily</th>
</tr>
</thead>
<tbody ng-repeat="val in results">
<tr>
<td>{{val.rowType}}</td>
<td>{{val.yearly}}</td>
<td>{{val.monthly}}</td>
<td>{{val.weekly}}</td>
<td>{{val.daily}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="../bower_components/angularjs/angular.js"></script>
<script src="js/app-service.js"></script>
<script src="js/app-controller.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
基金会欢迎
.行.全宽{
宽度：100%；
左边距：自动；
右边距：自动；
最大宽度：初始宽度；
}
工资计算器
-
-
每年
月刊
周报
每日的
{{val.rowType}
{{val.yearly}}
{{val.monthly}}
{{val.weekly}
{{val.daily}}
除公认的解决方案外，还有一种替代方案。Angular已经为您提供了防止此问题的工具：ngclope
：
只要把指令像
一样放在你的身体上，它就会起作用
编辑
这些文件还建议你不要把它放在正文上，而是放在页面的较小部分——只要你认为需要的地方。根据页面的大小，这是一个好主意。对于较小的页面，我将它放在正文上，从来没有遇到过问题。ng-clope在某种程度上会有所帮助，但您可以使用ng-bind指令而不是使用{}
来完全阻止它
e、 g
不是
{{val.monthly}
与ng-clope
一起，您可以在路由器中使用解析对象。这将阻止控制器实例化和视图呈现，直到数据存在
在下面的示例中，我假设您使用的是uiRouter
。同样的模式适用于ngRouter
您的状态配置：
$stateProvider
.state('yourState',{
templateUrl: 'yourTemplate.html',
controller: 'YourController as vm',
resolve: YourController.resolve
})
如您所见，已将状态的resolve属性设置为控制器上的静态resolve对象。现在，在解析此对象之前，路由将不会解析
要设置resolve对象，假设您有一个服务yourService
，该服务有一个返回承诺的方法getData
。这是非常重要的。因为在承诺得到解决之前，我们不希望路线得到解决
所以你的控制器可能看起来像这样
YourController.$inject = ['yourService'];
function YourController(yourService) {
var self = this;
yourService.getData().then((data) { self.data = data});
}
这是相当标准的。您可以使用vm.data
从视图中访问数据，但您将看到{{vm.data}}
的闪光。也就是说，如果我们删除添加到状态配置中的解析
因此，现在我们将控制器更改为添加一个静态解析对象，以使用我们添加到状态配置中的resolve
YourController.resolve = {
'yourService': 'yourService',
'data': ['yourService', function(yourService) {
return yourService.getData();
}]
}
YourController.$inject = ['data'];
function YourController(data) {
this.data = data;
}
现在我们有了一个解析对象。yourService
将作为正常服务解析，但是data
属性只有在getData（）
返回的承诺解析时才会解析。然后，该数据将使用依赖注入直接传递到控制器
事实上，你可能
YourController.$inject = ['yourService'];
function YourController(yourService) {
var self = this;
yourService.getData().then((data) { self.data = data});
}
YourController.resolve = {
'yourService': 'yourService',
'data': ['yourService', function(yourService) {
return yourService.getData();
}]
}
YourController.$inject = ['data'];
function YourController(data) {
this.data = data;
}