2016-05-17 46 views
1

輸入如何使用gulp任務將html轉換爲javascript字符串?

<div id="main"> 
    <div> 
    Sample Html 
    </div> 
</div> 

輸出

var myvar = '<div id="main">'+ 
    ' <div>'+ 
    ' Sample Html'+ 
    ' </div>'+ 
    '</div>'; 

我想轉換HTML模板,並添加到輸出模板部分的角度指令。

+1

gulp-html2js?。 – dfsq

+0

你嘗試過什麼? – Luka

+0

我需要將html模板添加到指令模板部分。爲此,我想從html生成一個javascript字符串,以便我可以將其添加/替換爲指令模板。 – Kinny

回答

1

由於@dfsq建議您所需要的html2js插件:

var gulp = require('gulp'); 
var html2js = require('gulp-html2js'); 
gulp.task("createTemplates", function(){ 
    //create js templates for templatecache 
    return gulp.src([baseDirectory + "/your_template_dir/*.tpl.html"]) 
     .pipe(html2js("directive.templates.js", { 
      base: baseDirectory, 
      name: "my.templates" //module name for injector 
     })).pipe(gulp.dest("your_output_directory")); 
}); 

創建:

(function(module) { 
    try { app = angular.module("my.templates"); } 
    catch(err) { app = angular.module("my.templates", []); } 
    app.run(["$templateCache", function($templateCache) { 
     "use strict"; 

     $templateCache.put("your_template_dir/template.tpl.html","<p>Template content</p>"); 
    }); 
}); 

現在,你可以注入的模塊( 「my.templates」)到你的指令,並使用「your_template_dir /template.tpl.html「作爲你的templateUrl。

+0

嗨讚賞回覆,但我不想爲模板創建另一個模塊,並注入我的指令。 首先,我想註冊我的模板作爲字符串像{'template'

'+ '
'+ ' Sample Html'+ '
'+ '
';}' 第二個甚至我改變我的模板中的任何東西,它也反映到我的目錄模板中。我已經完成了使用gulp-replace的第二部分,但是我陷入了第一部分。我嘗試了第一部分以及閱讀HTML文件刪除換行放入模板使用替換一些字符串。但事情是代碼沒有格式化。 – Kinny

+0

爲什麼你想讓代碼格式化?如果你縮小/醜化文件(你應該怎麼做,爲了減少網絡流量),格式化會丟失。 – Danscho

相關問題