6

I am studying Angular.js and Require.js at the moment. I encountered an issue here while I am using this two together. For example in my html I have something very simple like {{3+3}}. I found out this will only be evaluated to 6 few seconds after everything is loaded. The user can clearly see the whole process. But this is not good for me. I do not want the delay here. Can someone explain why this happened? Is this because I am doing manually bootstrap.

This is my main.js for require and my bootstrap code.

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']);
  });
});

Cheers

4

1 回答 1

6

当您在引导 Angular 之前使用 require.js 加载一些依赖项时，用户必须等待所有这些文件在应用程序启动之前完全加载。而且由于 HTML 在您的脚本之前首先加载，因此用户可以在一段时间内看到它的原始内容。

如果您不希望用户在 Angular 处理 HTML 元素之前看到它的内容，请使用ngCloak专门为此而制定的指令。看看文档的这个条目： http://docs.angularjs.org/api/ng.directive: ngCloak。该指令设置元素的样式，使其最初是隐藏的，当 Angular 引导并完成处理 HTML 元素的样式时，它会重新设置为可见，因此只显示编译后的 HTML。

更新：

但是由于上述解决方案在您的情况下无法立即工作（因为必须在模板主体之前加载角度库脚本 - 包含在文档中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:ngBind http://docs.angularjs.org/api/ng.directive:ngBindTemplate http://docs.angularjs.org/api/ng.directive： ngBindHtml 不安全

于 2013-05-20T13:52:50.510 回答