Question

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

webserver：Node.js + Express
模板引擎：Jade
css engine：less
客户端框架：AngularJS（v.1.x）
数据库：MongoDB

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

自从我使用John Papa的风格指南启动项目后，（理论上）升级到Angular 2将不会是一个大问题。

我目前尚未解决的问题是在Angular 2的Component模板中使用Jade。

示例：

＆＃13;

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

＆＃13;

我想把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]
})

Answer 2

您可以尝试使用

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

那应该阅读你的模板，如果你将它转换为HTML，那就应该没有任何问题。

Answer 3

我添加了一条路由来表示寻找部分然后呈现响应。这表示使用渲染引擎而不是仅仅响应jade文件。注意：我使用body-parser来获取请求参数中请求的单个模板文件。

这是我的组件定义：

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

这是我的快速路线定义：

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

替换＆＃39; ../ partials /＆＃39;使用相对于views目录的partials目录的路径。

Answer 4

tomaszbak的答案适用于Webpack。

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

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

Angular 2 with Jade Template

4 个答案: