使用Jade作爲angular2模板引擎

Question

我目前正試圖遷移到Angular2代替Angular1.x開發MEAN應用程序，但我目前有一個基於使用玉/帕格作爲我的模板引擎angular2的問題。我看到一篇關於如何使用webpack實現的文章，但該教程是針對另一個項目結構而不是官方的angular/cli。所以我問是否有一種方法玉/帕格可以用作角度/ cli項目結構的模板引擎？

Answer 1

集成帕格與角/ cli是非常容易的。

所有你需要做的是：

• 使用npm install pug-cli --save-dev
• 安裝pug-cli添加新script線到您的package.json的腳本："puggy": "pug src -P -w"。
• 編輯您的start任務，或創建一個新的，首先運行puggy，然後serve："dev": "npm run puggy & ng serve"。

你package.json應該是這樣的：

"scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "puggy": "pug src -P -w", 
    "dev": "npm run puggy & ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    } 

現在，只需運行npm run dev，或者你給任何名稱的任務，在你的終端，你應該看到所有.pug文件得到編譯/觀看/呈現，然後一切都提供了。

我建議您將所有.html文件添加到您的.gitignore中，並在其中添加/src/**/*.html，並且只將.pug文件推送到您的存儲庫。確保使用git rm --cached *.html刪除緩存的.html文件。

現在，你就可以寫一個形式類似

form(novalidate, '#f'='ngForm', '(ngSubmit)'='onSignin(f)') 

而且它編譯成它的HTML

<form novalidate="novalidate" #f="ngForm" (ngSubmit)="onSignin(f)"></form>