कच्चे (या संकलित) HTML के साथ एक टेम्पलेट यूआरएल बनाम एनजी-शामिल करें?

Question

मुझे लगता है कि एक ng-include निर्देश के साथ एक तत्व होता है एक टेम्पलेट मिल गया है कहते हैं:

<div ng-include src="'templates/top-promo-content.html'"></div> 

मैं हमारे बनाया एप्लिकेशन जे एस में हमारे टेम्पलेट्स के सभी को कारगर बनाने के लिए प्रयास कर रहा हूँ (browserify और brfs का उपयोग कर बदलना) है, जो धारणात्मक, ऐसा दिखाई देगा:

<div ng-include src="fs.readFileSync('./templates/top-promo-content.html', 'utf8')"></div> 

कौन सा अंत में परिणाम होगा में:

<div ng-include src="<ul><li>list item</li></ul>"></div> 

क्या ng-include के भीतर टेम्पलेट यूआरएल का उपयोग करने के बजाय कच्चे या संकलित एचटीएमएल का उपयोग करने का कोई तरीका है? यदि नहीं, तो कोणीय में एक और विकल्प है जो मुझे इसे पूरा करने की अनुमति देगा, या तो कुछ प्रकार के आंशिक या आंशिक, लेकिन कच्चे/संकलित HTML को शामिल करने की क्षमता के साथ?

Answer 1

टेम्पलेट्स को script टैग वाले पृष्ठ पर शामिल किया जा सकता है।

<script type="text/ng-template" id="templates/top-promo-content.html"> 
    <ul><li>list item</li></ul> 
</script> 

इस टेम्पलेट कैश में टेम्पलेट डालता है और ng-include निर्देश वहाँ से हो जाता है। एक ही यूआरएल के माध्यम से टेम्पलेट्स प्राप्त करने वाले प्रत्येक निर्देश के लिए भी यही सच है।

Answer 2

मैंने इस पर कुछ दिन बिताए और $templateCache का उपयोग करके एक अच्छा समाधान मिला।

जावास्क्रिप्ट

app.run(['$templateCache', function($templateCache) { 
    //Add ng-include templates to template cache 
    $templateCache.put('foo.html', require('./templates/foo.html')); 
    $templateCache.put('bar.html', require('./templates/bar.html')); 
}]); 

एचटीएमएल

<ng-include="'foo.html'"></ng-include> 

यह आपके bundle.js में टेम्पलेट्स शामिल होंगे।

इसके अलावा यदि आप watchify को रिबंडल करने के लिए चला रहे हैं; टेम्पलेट में किए गए किसी भी बदलाव से रिबंडल को आग लगने और नए टेम्पलेट के साथ लाइव रीफ्रेश करने की निगरानी होगी।

Answer 3

मैं इसे मेरे मामले में काम करने के लिए Malkus जवाब ढाल लिया है:

जावास्क्रिप्ट:

app.run(['$templateCache', function($templateCache) { 
    //Add ng-include templates to template cache 
    $templateCache.put('foo.html', fs.readFileSync('/templates/foot.html').toString()); 
}]); 

एचटीएमएल

<ng-include="'foo.html'"></ng-include> 

बढ़िया काम करता है!