使用Jade作为angular2模板引擎

问题描述：

我目前正试图迁移到Angular2代替Angular1.x开发MEAN应用程序，但我目前有一个基于使用玉/帕格作为我的模板引擎angular2的问题。我看到一篇关于如何使用webpack实现的文章，但该教程是针对另一个项目结构而不是官方的angular/cli。所以我问是否有一种方法玉/帕格可以用作角度/ cli项目结构的模板引擎？使用Jade作为angular2模板引擎

答

集成帕格与角/ 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>

使用Jade作为angular2模板引擎

相关推荐