Angular 2与Jade模板

Question

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

• Web服务器：Node.js + Express
• 模板引擎：Jade
• CSS引擎：less
• 客户端框架：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。

您对此有何建议？ 你们有任何想法吗？

- nicolo

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]
})

- tomaszbak

---

使用 Jade 时需要注意 http://html2jade.org/ 会将属性名转为小写，详见 https://github.com/donpark/html2jade/issues/102，而 WebStorm 中的 Jade 解析器不支持 Angular2 语法 https://youtrack.jetbrains.com/issue/WEB-19625。 - tomaszbak

Answer 2

你可以尝试使用：

@Component({
    templateUrl: '/path/to/your/template`
)}

那应该读取你的模板，如果你将其转换为HTML，就不应该有任何问题。

- Szymon Błaszczyński

Answer 3

我添加了一个路由到Express，用于查找局部视图并渲染响应。这使得Express使用渲染引擎而不仅仅是响应Jade文件。注意：我使用body-parser来获取请求参数中请求的各个模板文件。

以下是我的组件定义：

@Component({
  selector: 'my-app',
  directives: [CoffeeShopsComponent],
  templateUrl: '/partials/app.component.jade'
})

这是我的 Express 路由定义：

app.get('/partials/*', function(req, res) {
  console.log(req.params);
  res.render('../partials/' + req.params[0]);
});

将“../partials/”替换为相对于视图目录的您的分部目录的路径。

- Robert Tamlyn

---

请纠正我，但即使我发现这个答案非常酷，我肯定会使用这种方法，但我们仍然有以下问题，例如，如果您想在模板中实现ngFor或ngModel，这种方式不可能实现，对吧？或者至少在代码片段中没有展示如何实现这样的目标... - Pedro Emilio Borrego Rached

*ngFor或ngModel将被Jade编译器保留在模板中。然后，Angular将看到ngFor并复制HTML。 - Robert Tamlyn

Answer 4

tomaszbak提供了适用于Webpack的答案。

如果您正在使用构建工具（如Gulp），那么您可能正在将某些内容编译为某个构建目录（类似于www或app文件夹）。如果是这种情况，您可以在组件的templateUrl部分中指定编译模板的路径：

@Component({
  selector: 'login-page',
  templateUrl: 'app/templates/app.html'
})

- fastredshoes