Angular.js和Require.Js

我正在學習Angular.js和Require.js。我在這裏遇到了一個問題，而我一起使用這兩個。例如在我的html中，我有一些非常簡單的{{3 + 3}}。我發現這隻會在所有加載完成後的6秒內評估。用戶可以清楚地看到整個過程。但這對我並不好。我不想在這裏拖延。有人能解釋爲什麼發生這種情況嗎這是因爲我正在手動引導。Angular.js和Require.Js

這是我的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']); 
    }); 
});

乾杯

來源

2013-05-20 Victor

當你加載一些依賴與require.js的Bootstrap的角度，用戶之前必須等待所有這些文件之前應用程序啓動被完全加載。而且由於HTML在腳本之前首先加載，所以原始內容在用戶看來已經有一段時間了。

如果您不希望用戶在通過角度處理之前查看HTML元素的內容，請使用僅爲此設置的ngCloak指令。看看這個文檔的條目：http://docs.angularjs.org/api/ng.directive:ngCloak。該指令設置元素的樣式，以便它最初隱藏，並且當角度引導並完成處理時，HTML元素的樣式會重新設置爲可見，因此僅顯示已編譯的HTML。

更新：

但由於上述溶液中的情況下將無法正常工作通俗易懂（因爲角度庫腳本將有模板正文之前加載 - 包含在文檔的head），你應該還在您的文檔的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

來源

2013-05-20 13:52:50 mirrormx

不工作這麼好。我認爲這是因爲ng-cloak只會在應用程序啓動後才能工作。 – Victor

更新了答案。 – mirrormx

正如本答案中所述，您必須在樣式中定義一個display：none來將任何ng-cloak的元素初始化爲隱藏狀態，直到Angular在引導後有機會消化它們。當Angular處理它們時，它會使元素可見，從而防止在Angular有機會做到這一點之前顯示未綁定的表達式。 –

Angular.js和Require.Js

回答

相關問題