我正在研究Angular.js和Require.js.我在这里使用这两个时遇到了一个问题.例如在我的html中,我有一些非常简单的东西,如{{3 3}}.我发现这只会在加载完所有内容后的几秒内进行评估.用户可以清楚地看到整个过程.但这对我不利.我不想在这里拖延.有人可以解释为什么会这样吗?这是因为我在做手动引导程序.
这是我的require.js for require和我的bootstrap代码.
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']); }); });
干杯
当您在引导角度之前使用require.js加载某些依赖项时,用户必须等待所有这些文件在应用程序启动之前完全加载.并且因为HTML首先在脚本之前加载,所以原始内容会在一段时间内对用户可见.
如果您不希望用户在使用angular处理HTML元素之前查看HTML元素的内容,请使用专门为此设置的ngCloak指令.看看文档的此项:http://docs.angularjs.org/api/ng.directive:ngCloak.该指令设置元素的样式,以便它最初是隐藏的,当角度引导程序和完成处理HTML元素的样式重新设置为可见,从而只显示编译的HTML.
更新:
但是,由于上述解决方案在您的情况下不会立即起作用(因为角度库脚本必须在模板主体之前加载 – 包含在文档的头部中),您还应该在文档的head部分中包含以下样式:
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak { display: none; }
这是加载后页面样式附加的角度.
另一种解决方案是不将{{}}绑定直接插入到元素的主体内,而是使用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