Angular.js और Requ.Js

Question

मैं फिलहाल Angular.js और Requ.js का अध्ययन कर रहा हूं। मुझे यहां एक समस्या का सामना करना पड़ा, जबकि मैं इन दोनों का एक साथ उपयोग कर रहा हूं। उदाहरण के लिए मेरे एचटीएमएल में मेरे पास {{3 + 3}} की तरह कुछ सरल है। मुझे पता चला कि सबकुछ लोड होने के बाद ही इसका मूल्यांकन केवल 6 सेकंड में किया जाएगा। उपयोगकर्ता पूरी प्रक्रिया को स्पष्ट रूप से देख सकता है। लेकिन यह मेरे लिए अच्छा नहीं है। मुझे यहां देरी नहीं चाहिए। क्या कोई समझा सकता है कि ऐसा क्यों हुआ? ऐसा इसलिए है क्योंकि मैं मैन्युअल रूप से बूटस्ट्रैप कर रहा हूं।

यह मेरी मुख्य.जेएस आवश्यकता है और मेरे बूटस्ट्रैप कोड के लिए है।

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

आप कोणीय, उपयोगकर्ता bootstraping से पहले require.js के साथ कुछ निर्भरता लोड कर रहे हैं के रूप में के लिए उन सभी फाइलों को पूरी तरह से आवेदन शुरू होने से पहले लोड करने के लिए इंतजार करना पड़ता है। और क्योंकि आपकी स्क्रिप्ट से पहले एचटीएमएल लोड हो जाता है, इसलिए कच्ची सामग्री थोड़ी देर के लिए उपयोगकर्ता को दिखाई देती है।

यदि आप कोणीय द्वारा संसाधित होने से पहले उपयोगकर्ता को अपने HTML तत्व की सामग्री देखने के लिए नहीं चाहते हैं, तो ngCloak निर्देश का उपयोग करें जो इसके लिए बनाया गया है। प्रलेखन के इस प्रविष्टि पर एक नज़र डालें: http://docs.angularjs.org/api/ng.directive:ngCloak। यह निर्देश तत्व की शैली को सेट करता है ताकि यह प्रारंभ में छिपा हुआ हो और जब कोणीय बूटस्ट्रैप्स और एचटीएमएल तत्व की शैली को संसाधित करने के लिए समाप्त हो जाए तो दृश्यमान पर वापस सेट किया गया है, इस प्रकार केवल संकलित 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