AngularJS 带有 RequireJS 标签显示 breifly

Question

我在使用 require 时引入了 angularjs，但问题是，angular 标签会显示片刻，直到 angular 脚本被解析。

我是否必须将 angularjs 从 requirejs 中取出并在 requirejs 初始化之前定义它，或者有更好的方法吗？

这是我的要求：

require.config({
    map: {},
    paths: {
        "angular": [
            "angular"
        ],
        "jquery": [
            "jquery"
        ],
        'bootstrap': [
            'bootstrap'
        ],
        'kendo': [
            'kendo'
        ]
    },
    shim: {
        'bootstrap': ['jquery'],
        'kendo': ['jquery'],
        'angular': {
            exports: 'angular'
        }
    }
})

Answer 1

这是 ngCloak 旨在解决的用例。

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.

<div id="template1" ng-cloak>{{ 'hello' }}</div>

Answer 2

在文档头部之外加载 angular 时（正如您使用 requirejs 加载 angular 所做的那样），ng-cloak 将不会立即工作，因为隐藏所需的样式 angular 元素包含在 angular.js.

中

要修复，您可以自己在文档的头部手动添加这些样式。一个简单的样式标签就可以做到。

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>

总而言之，您可以将 ng-cloak 指令添加到文档的 body 标签（或具有 ng-app 的相同标签），但最佳做法是仅将 ng-cloak 添加到元素需要它。

AngularJS 带有 RequireJS 标签显示 breifly

AngularJS with RequireJS tags showing breifly

javascript

requirejs

angularjs