Angular.js and Require.Js

Question

我目前正在学习Angular.js和Require.js。我在这里遇到了一个问题，而我使用这两个在一起。例如，在我的html我有一些非常简单的东西，如{{3+3}}。我发现这只会被评估为6秒后，一切加载。用户可以清楚地看到整个过程。但这对我不好。我不想在这里耽搁。有人能解释一下为什么会这样吗?这是因为我正在做手动引导。

这是我的main.js的要求和我的引导代码。

require.config({
  paths: {
    jquery: 'lib/jquery/jquery-1.9.1.min',
    bootstrap: 'lib/bootstrap/bootstrap.min',
    angular: 'lib/angular/angular.min'
  },
  baseUrl: '/Scripts',
  shim: {
    'angular': { 'exports': 'angular' },
    'bootstrap': { deps: ['jquery'] }
  },
  priority: [
    'angular'
  ]
});
require(['angular', 'app/admin/app.admin', 'app/admin/app.admin.routes', 'app/admin/index/index', 'app/admin/app.admin.directives'], function (angular, app) {
  'use strict';
  angular.element(document).ready(function () {
    angular.bootstrap(document, ['app.admin']);
  });
});

欢呼

Answer 1

当你在启动angular之前用require.js加载一些依赖项时，用户必须等待所有这些文件都加载完成后才能启动应用。因为HTML是在脚本之前加载的，所以它的原始内容在一段时间内对用户可见。

如果你不想让用户在你的HTML元素被angular处理之前看到它的内容，那就使用ngCloak指令。看一下文档的这个条目:http://docs.angularjs.org/api/ng.directive:ngCloak。该指令设置元素的样式，使其最初是隐藏的，当angular启动并完成处理时，该HTML元素的样式被设置为可见，从而只显示编译后的HTML。

更新:

但是由于上面的解决方案不会在你的情况下直接工作(因为angular库脚本必须在模板体之前加载-被包含在文档的head中)，你应该在你的文档的head部分另外包括以下样式:

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

这是angular加载后添加到页面样式中的内容。

另一个解决方案是不直接将{{ }}绑定插入元素的主体中，而是使用ng-bind, ng-bind-template和ng-bind-html-unsafe指令代替。你可以在这里找到它们的描述:

http://docs.angularjs.org/api/ng.directive ngBindhttp://docs.angularjs.org/api/ng.directive:ngBindTemplatehttp://docs.angularjs.org/api/ng.directive: ngBindHtmlUnsafe