Question

我目前正在尝试迁移到使用Angular2开发MEAN应用程序代替Angular1.x但我目前遇到的问题是基于使用jade / pug作为angular2中的模板引擎。我看到了一篇关于如何使用webpack实现这一点的帖子，但该教程是针对另一个项目结构而不是官方的角度/ cli。所以我想问一下jade / pug是否可以用作带角度/ cli项目结构的模板引擎？

Answer 1

将 Pug 与 angular / 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个文件推送到您的仓库。确保使用.html删除缓存的git rm --cached *.html文件。

现在你可以写一个像

这样的表格了

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

将其编译成html

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

使用Jade作为angular2模板引擎

1 个答案: