使用angularjs和requirejs时的指令渲染延迟_Angularjs_Requirejs

使用angularjs和requirejs时的指令渲染延迟

angularjs requirejs

使用angularjs和requirejs时的指令渲染延迟,angularjs,requirejs,Angularjs,Requirejs,基本上，我的问题是，“我是{{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/re

基本上，我的问题是，“我是{{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和angular库是由requirejs异步加载的（脚本标记上有一个“async”属性），因此DOM在创建store模块之前被呈现，从而造成延迟

为了避免在呈现“我是{{10+13}}”和“我是13”之间出现这种差距，我必须做些什么？我可以加载main.js和angular js synchronous/without requirejs，但这似乎不是一个最佳实践。

我认为您可以使用指令

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

没有测试您可以试一试。：）

更新

隐藏

，直到

角度

可用

.initial-hide {
   display: none;
}

.show {
    display: block !important;
}


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

这是一个

我添加了2秒超时来延迟requirJs调用angularjs

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

选择哪一个取决于您的实际标记。

您甚至可以将其包装在自定义指令中

，正如@K.Toress所提到的，解决此问题的方法是在body元素上使用，或者更具体地说，在有问题的元素上使用，以改进页面的呈现

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

在

display:none中放置ng斗篷元素需要一些css/样式，因此如果您在CSP模式下使用angular，则不会有问题，因为angular-CSP.css样式表通常会包含在内。但是，如果您没有在CSP模式下使用angular，那么angular.js/angular.min.js中嵌入的css规则将不会有任何影响，因为库很可能在DOM完全加载后加载。因此，您需要手动为[ng-clope]
元素添加一些样式：
<head>
    ...
    <style>[ng-cloak] {display: none;}</style>
</head>

除非我手动链接angular-csp.css样式表，否则这似乎不起作用。我不想这样做，因为我不在CSP模式下。ng cloack指令即使在非CSP模式下也可以工作吗？它说在非CSP模式下，css规则嵌入到angular.js和angular.min.js中…所以我不明白为什么它不工作。啊，但是库是在加载DOM之后加载的，因此，我遇到了与以前完全相同的问题。我更新了答案，可能它会解决您的问题。：）请检查。嘿，谢谢你的帮助！！如果你看看我下面的答案，我想我找到了一个更好的解决方案。angular在编译模板时自动删除ng-clope属性，因此不需要额外的类。竖起大拇指！我认为我仍然会有同样的问题，因为它不会阻止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板
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.

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

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