angularjs - Angular.js 和 Require.Js

Question

我目前正在研究 Angular.js 和 Require.js。当我一起使用这两个时，我在这里遇到了一个问题。例如，在我的 html 中，我有一些非常简单的东西，例如 {{3+3}}。我发现这只会在加载完所有内容后评估为 6 秒。用户可以清楚地看到整个过程。但这对我不利。我不想在这里耽搁。有人可以解释为什么会这样吗？这是因为我正在手动引导。

这是我的 main.js for require 和我的引导代码。

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 在您的脚本之前首先加载，因此用户可以在一段时间内看到它的原始内容。

如果您不希望用户在 Angular 处理 HTML 元素之前看到它的内容，请使用 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 附加到页面样式的内容。

另一种解决方案是不插入 {{ }}直接绑定(bind)在元素的主体内部，但使用 ng-bind , ng-bind-template和 ng-bind-html-unsafe而是指令。你可以在这里找到他们的描述:

http://docs.angularjs.org/api/ng.directive:ngBind
http://docs.angularjs.org/api/ng.directive:ngBindTemplate
http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe