मैं जेएस एचटीएमएल फाइलों को एंगुलर 2 में एक टेम्पलेट में कैसे जोड़ूं (जैसे $ टेम्पलेट कैश)

Question

यह शायद खराब शब्द है, लेकिन मेरे मौजूदा कोणीय 1 प्रोजेक्ट्स में मैं HTML संसाधनों का एक समूह उपयोग करता हूं जो कि जेएस फ़ाइल में प्रीकंपल किए गए हैं HTML2JS। यह बहुत अच्छा काम करता है इसलिए अब मैं कोणीय 2 के लिए अपने दृष्टिकोण पर विचार कर रहा हूं। चूंकि HTML2JS को अपडेट नहीं किया गया है, इसलिए सब कुछ लगभग 2 रणनीतियों को घूमता प्रतीत होता है।

सबसे पहले आप @tempate atScript के अंदर HTML इनलाइन जोड़ते हैं। यह कैश करता है इसलिए मैं हर समय सर्वर पर नहीं जा रहा हूं, लेकिन यह आईडीई में प्रारूपित करना भी मुश्किल बनाता है और पठनीयता आईएमएचओ को कम करता है।

दूसरा बाहरी फ़ाइल का उपयोग करना और @ टेम्पलेट के अंदर यूआरएल का उपयोग करना है। ऐसा लगता है कि चीजें अधिक पठनीय बनाती हैं लेकिन कैशिंग की मात्रा को सीमित करती हैं। इसका मतलब है कि मुझे बड़ी सर्वर कॉल करने की ज़रूरत है जिसे मैं टालना चाहूंगा।

क्या एचटीएमएल में फ़ाइल शुरू करने का कोई तरीका है तो एक .js फ़ाइल में संकलित किया जाना चाहिए और एक कोणीय 2 घटक में शामिल किया गया है?

Answer 1

Webpack चूंकि नए Gulp (also Gulp needs some help), here is what I came up with (uses stylus and jade) ...

उपयोग है Webpack इस तरह लोडर ...

loaders: [ 
    { 
    include: /\.pug/, 
    loader: 'pug-html-loader' 
    }, 
    { 
    test: /\.styl$/, 
    loader: 'style-loader!css-loader!stylus-loader' 
    }, 
    { 
    test: /\.ts$/, 
    loader: 'ts' 
    } 
] 

तब उपयोग इस तरह से अपनी घटकों में की आवश्यकता है ...

@Component({ 
    ... 
    template: String(require('./navbar.component.pug')), 
    styles: [String(require('./navbar.component.styl'))], 
    ... 
}) 

styles और template बजाय templateUrl और styleUrls

Answer 2

यदि आप संकलन करने के लिए गल्प का उपयोग कर रहे हैं, तो आप कोणीय-एम्बेड-टेम्पलेट प्लगइन का उपयोग कर सकते हैं। यहाँ मैं टेम्पलेट में templateUrl लोड हो रहा हूँ, जिले फ़ोल्डर में जावास्क्रिप्ट को संकलन से पहले, स्रोत नक्शे के साथ:

var gulp   = require('gulp'); 
var ts    = require('gulp-typescript'); 
var sourcemaps  = require('gulp-sourcemaps'); 
var embedTemplates = require('gulp-angular-embed-templates'); 

gulp.task('ts:build', function() { 
    gulp.src('app/**/*.ts') 
     .pipe(embedTemplates()) 
     .pipe(sourcemaps.init()) 
     .pipe(ts({ 
      noImplicitAny: true, 
      module: 'system', 
      target: 'ES5', 
      experimentalDecorators: true, 
      moduleResolution: 'node', 
      emitDecoratorMetadata: true 
     })) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('./dist')); 
});