带有 Jade 模板的 Angular 2

Question

我有一个使用以下技术开发的大型 Web 应用程序:

• 网络服务器:Node.js + Express
• 模板引擎:Jade
• CSS 引擎:较少
• 客户端框架:AngularJS (v. 1.x)
• 数据库:MongoDB

我非常有兴趣切换到 Angular 2 并使用 Angular 2 Universal 以利用服务器端渲染。

由于我是使用 John Papa 的风格指南开始项目的，(理论上)升级到 Angular 2 不会有太大问题。

我现在还没有解决的问题是在 Angular 2 的组件模板中使用 Jade。

例子:

@Component({
  selector: 'todo-app',
  template: `
    <h2>Todo</h2>
    <span>{{remaining}} of {{todos.length}} remaining</span>
    [ <a href="javascript: false" (click)="archive()">archive</a> ]
    <todo-list [todos]="todos"></todo-list>
    <todo-form (newTask)="addTask($event)"></todo-form>`,
  directives: [TodoList, TodoForm]
})

我想在模板中放入 Jade 而不是 html。

您对此有何建议？你们有人知道吗？

Answer 1

使用 Webpack raw-loader和 jade-html-loader装载机:

loaders: [
  { test: /\.jade$/, loader: 'raw!jade-html' },
  // ...
]

你可以这样做:

@Component({
  selector: 'todo-app',
  template: require('./todo-app.jade'),
  directives: [TodoList, TodoForm]
})