3

我有一个使用以下技术开发的大型 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 放在模板中。

你对此有什么建议吗？你们中有人知道吗？

4

4 回答 4

5

使用 Webpack raw-loader和jam -html-loader加载器：

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

你可以做：

@Component({
  selector: 'todo-app',
  template: require('./todo-app.jade'),
  directives: [TodoList, TodoForm]
})
于 2016-02-01T12:59:14.350 回答
1

你可以试试

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

那应该阅读您的模板，如果您将其转换为 HTML，则应该没有问题。

于 2016-02-05T00:56:43.003 回答
1

我添加了一个路由来表达，它查找部分然后呈现响应。这很容易使用渲染引擎，而不仅仅是使用翡翠文件进行响应。注意：我正在使用 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]);
});

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

于 2016-06-24T15:27:29.897 回答
0

tomaszbak 有适用于 Webpack 的答案。

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

@Component({
  selector: 'login-page',
  templateUrl: 'app/templates/app.html'
})
于 2016-04-06T19:15:20.857 回答