使用Jade作为angular2模板引擎 [英] Use Jade as angular2 template engine

问题描述

我目前正在尝试迁移到使用Angular2代替Angular1.x来开发MEAN应用程序，但是基于基于jade/pug作为我的angular2模板引擎，目前存在问题.我看到了一篇有关如何使用webpack来实现这一点的文章，但是该教程是针对另一个项目结构的，而不是官方的angular/cli.所以我问是否有一种方法可以将玉/pug用作具有angular/cli项目结构的模板引擎?

I'm currently trying to migrate to developing MEAN apps with Angular2 in place of Angular1.x but i'm currently having an issue based on using jade/pug as my template engine in angular2. I saw a post on how to implement this with webpack, but that tutorial is meant for another project structure and not the official angular/cli. So i'm asking if there's a way jade/pug can be used as template engine with the angular/cli project structure?

推荐答案

将 Pug 与 angular/cli 集成非常简单.

您需要做的只是:

• 使用npm install pug-cli --save-dev
安装 pug-cli
• 在package.json的脚本中添加新的script行:"puggy": "pug src -P -w".
• 编辑您的start任务，或创建一个新任务，首先运行puggy，然后运行serve:"dev": "npm run puggy & ng serve".

• Install pug-cli using npm install pug-cli --save-dev
• Add a new script line into your package.json's scripts: "puggy": "pug src -P -w".
• Edit your start task, or create a new one, to first run puggy and then serve: "dev": "npm run puggy & ng serve".

您的package.json应该看起来像这样:

Your package.json should look like this:

"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文件都已被编译/监视/渲染，然后所有内容都已提供.

Now, simply run npm run dev, or whatever name you gave to the task, in your terminal and you should see all of your .pug files getting compiled/watched/rendered and then everything served up.

我建议您将所有.html文件添加到.gitignore中，并在其中添加/src/**/*.html，仅将.pug文件推送到您的存储库中.确保使用git rm --cached *.html删除缓存的.html文件.

I suggest you to add all of your .html files into your .gitignore adding /src/**/*.html into it and only pushing .pug files to your repo. Make sure you remove cached .html files using git rm --cached *.html.

现在您将能够编写类似这样的表格

Now you'll be able to write a form like

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

并将其编译为html

And compile it into it's html

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

这篇关于使用Jade作为angular2模板引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！