Question

基本上，我的问题是“我{{10 + 13}}”是在main.js中创建“store”模块之前的第二个/半秒渲染的内容。

<!DOCTYPE html>
<html lang="en" ng-app="store">
    <head>
        <title>...</title>
        <script data-main="main.js" src="../bower_components/requirejs/require.js"></script>
        <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    I am {{ 10 + 13 }}
</body>

main.js设置requirejs配置，需要角度库并设置“store”模块：

require.config({
    paths: {angular: '../bower_components/angular/angular.min'},
    shim: {angular: {exports: 'angular'}}
});

require(['angular'], function(angular) {
    var app = angular.module('store', []);
});

我认为发生这种情况的原因是因为main.js和角度库是由requirejs异步加载的（脚本标记上带有“async”属性），因此DOM在创建商店模块之前呈现因此造成了延迟。

我必须做些什么才能避免在渲染“我{{10 + 13}}”和“我13岁”之间出现这种差距？我可以加载main.js和angular js同步/没有requirejs，但这似乎不是最好的做法。

Answer 1

我认为您可以使用ng-cloack指令

<body>
    I am <span ng-cloak>{{ 10 + 13 }}</span>
</body>

添加css

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

没有测试你可以尝试一下。：）

Example

<强>更新

隐藏<body>，直到angular可用。

.initial-hide {
   display: none;
}

.show {
    display: block !important;
}


<body class="initial-hide" ng-class="{show : initedScripts}">
    ......
    ......
</body>

正文将获得initial-hide并隐藏，直到show类应用于它。变量show设置为initedScripts时应用true类。

JS

中的

var app = angular.module('plunker', []);

app.run(function($rootScope) {
     $rootScope.initedScripts = true;
});

set `initedScripts` to `true` in the run block and that means angular loaded successfully.

这是一个DEMO

我添加了2秒超时以延迟通过requirJs调用angularjs

Answer 2

您可以将表达式包装在一些由angular支持的自定义标记中进行插值。因此，在加载角度之前，它们不会被浏览器呈现，并且会编译页面上的所有内容。

选择哪一个取决于您的真实标记。您甚至可以将其包装在自定义指令

中

Answer 3

正如@ K.Toress所提到的，解决这个问题的方法是在body元素上使用ng-cloak，或者更具体地说在有问题的元素上使用http://jsfiddle.net/ethueuhj/1/来改善页面的呈现。

将ng-cloak元素放在display: none;中需要一些css / style，所以如果你在CSP模式下使用angular，你就没有问题，因为angular-csp.css样式表通常是包括在内。但是，如果您未在CSP模式下使用angular，则angular.js / angular.min.js中嵌入的css规则将不会产生任何影响，因为在完全加载DOM之后很可能会加载库。因此，您需要为[ng-cloak]元素手动添加一些样式：

<head>
    ...
    <style>[ng-cloak] {display: none;}</style>
</head>

为了您的信息，因为angular可以在DOM之后或代码库之前加载，所以您不应该在文档中包含ng-app属性，而是手动引导角度以避免任何异步问题：

require(['angular'], function(angular) {
    var app = angular.module('app', []);
    angular.bootstrap(document, ['app']);
});

使用angularjs和requirejs

3 个答案: