टेम्पलेट कैश में टेम्पलेट पथ कैसे ठीक करें? (घूंट-कोणीय templatecache)

Question

मैं एक templateCache.js फ़ाइल जिसमें 1. (my full gulpfile)

मेरी सभी HTML टेम्पलेट फ़ाइलों को जोड़ती इंजेक्शन लगाने के बाद उत्पन्न करने के लिए gulp-angular-templatecache उपयोग कर रहा हूँ कि मेरे ऐप में नया मॉड्यूल, मेरे निर्देशों होगा स्वचालित रूप से टेम्पलेट्स उठाएं और मुझे अपने निर्माण फ़ोल्डर में आंशिक .html फ़ाइलों को जोड़ने की आवश्यकता नहीं होगी।

समस्या यह है कि है अग्रणी फ़ोल्डर पथ काट रहा है, नीचे मेरी उदाहरण देखें:

मेरे निर्देशों में पथ:

templateUrl : "panels/tags/tagsPanel.html"... 
templateUrl : "header/platform_header/platformHeader.html"... 

मेरी उत्पादित templateCache फाइल में पथ:

$templateCache.put("tags/tagsPanel.html"... 
$templateCache.put("platform_header/platformHeader.html"... 

^panels और header खो रहे हैं।

---

मैं एक समारोह है कि ठीक कर देंगे कि मेरे Gulpfile में लिखने की कोशिश कर रहा हूँ।

मेरी Gulpfile की config अनुभाग:

var config = { 
    srcPartials:[ 
     'app/beta/*.html', 
     'app/header/**/*.html', 
     'app/help/*.html', 
     'app/login/*.html', 
     'app/notificaitons/*.html', 
     'app/panels/**/*.html', 
     'app/popovers/**/*.html', 
     'app/popovers/*.html', 
     'app/user/*.html', 
     'app/dashboard.html' 
    ], 
    srcPaths:[ 
     'beta/', 
     'header/', 
     'help/', 
     'login/', 
     'notificaitons/', 
     'panels/', 
     'popovers/', 
     'popovers/', 
     'user/', 
     'dashboard.html' 
    ], 
    destPartials: 'app/templates/' 
}; 

मेरे html-templates gulp.task

gulp.task('html-templates', function() { 
    return gulp.src(config.srcPartials) 
    .pipe(templateCache('templateCache.js', { 
     root: updateRoot(config.srcPaths) 
    }, 
    { module:'templateCache', standalone:true }) 
    ).pipe(gulp.dest(config.destPartials)); 
}); 

function updateRoot(paths) { 
    for (var i = 0; i < paths.length; i++) { 
     // console.log(paths); 
     console.log(paths[i]); 
     return paths[i]; 
    } 
} 

^ऊपर काम कर रहा है, जबकि इसमें gulp-angular-templatecache में root option का उपयोग करता है एक नया स्ट्रिंग संलग्न करने के लिए टेम्पलेट पथ के सामने।

समस्या मेरा कोड एक बार रिटर्न से ऊपर है और रास्ते में पहले आइटम के सभी पथ अपडेट करता है जो beta/ है।

आप इसे कैसे लिखेंगे ताकि यह प्रत्येक फ़ाइल के लिए पथ को सही ढंग से बदल सके?

Answer 1

इसे समझ लिया! मैं सही फ़ोल्डर नाम का उपयोग कर नहीं होना चाहिए था, लेकिन मेरे config में ** globs

var config = { 
    srcTemplates:[ 
     'app/**/*.html',    
     'app/dashboard.html', 
     '!app/index.html' 
    ], 
    destPartials: 'app/templates/' 
}; 

अद्यतन gulp.task:

$templateCache.put("beta/beta.html"... 
$templateCache.put("header/control_header/controlHeader.html"... 
$templateCache.put("panels/tags/tagsPanel.html"... 

Answer 2

मैं:

gulp.task('html-templates', function() { 
    return gulp.src(config.srcTemplates) 
    .pipe(templateCache('templateCache.js', { module:'templateCache', standalone:true }) 
    ).pipe(gulp.dest(config.destPartials)); 
}); 

अब उत्पादन सही है एक समान मुद्दे में भाग गया, लेकिन मेरे मामले में, सभी gulp.src प्रविष्टियों के लिए एक ही निर्देशिका का उपयोग करना संभव नहीं था।

एक समाधान है कि उन सभी फ़ोल्डर

return gulp.src(['public/assets/app1/**/*.tpl.html', 'public/assets/common_app/**/*.tpl.html']) 
    .pipe(templateCache({ 
     root: "/", 
     base: __dirname + "/public", 
     module: "App", 
     filename: "templates.js" 
    })) 
    .pipe(gulp.dest('public/assets/templates')) 

gulpfile मान लिया जाता है एक निर्देशिका ऊपर सार्वजनिक निर्देशिका से है कि काम करेंगे नहीं है। यह स्रोत स्ट्रिंग से फ़ाइलों के पूर्ण पथ से बेस स्ट्रिंग को हटा देगा। बेस एक ऐसा फ़ंक्शन भी हो सकता है जो फ़ाइल ऑब्जेक्ट को पारित किया जाएगा जो अधिक जटिल परिस्थितियों में सहायक हो सकता है। यह gulp-angular-templatecache

Answer 3

में index.js के चारों ओर लाइन 60 के आसपास है, आप this gulp plugin का भी उपयोग कर सकते हैं जो टेम्पलेट यूआरएल में संदर्भित टेम्पलेट के साथ टेम्पलेट यूआरएल को अपने मार्ग, निर्देश और प्रतिस्थापित कर सकते हैं।

यह आपके आवेदन में टेम्पलेट यूआरएल को संभालने के संबंध में सभी सिरदर्द को हटा देगा। यह पूर्ण यूआरएल के बजाय जेएस फाइलों को निर्देशित करने के लिए सापेक्ष यूआरएल का उपयोग करता है।

src 
+-hello-world 
    |-hello-world-directive.js 
    +-hello-world-template.html 

हैलो-दुनिया-directive.js:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     // relative path to template 
     templateUrl: 'hello-world-template.html' 
    }; 
}); 

हैलो-दुनिया-template.html:

<strong> 
    Hello world! 
</strong> 

gulpfile.js:

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

gulp.task('js:build', function() { 
    gulp.src('src/scripts/**/*.js') 
     .pipe(embedTemplates()) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp- कोणीय-एम्बेड-टेम्पलेट्स निम्न फ़ाइल उत्पन्न करेंगे:

angular.module('test').directive('helloWorld', function() { 
    return { 
     restrict: 'E', 
     template:'<strong>Hello world!</strong>' 
    }; 
});