带有 Haml 的 Angular2 [英] Angular2 with Haml

问题描述

是否可以在 Angular 2 中使用 HAML 作为模板引擎?

Is it possible to use HAML as template engine in Angular 2?

在 Angular 2(版本 2.3.1)中，您可以使用 scss/sass 代替 css.这是 angular-cli 和 --style 给定的选项.对于模板，cli 只允许通过设置 --inline-template 在内联模板之间进行更改.

In Angular 2 (version 2.3.1) you can use scss/sass instead of css. This is a given option by angular-cli with --style. For templates the cli only allows to change between inline template by setting --inline-template.

除非支持，否则我如何配置我的 Angular 2 应用程序(由 angular-cli 版本 1.0.0-beta.26 创建)来编写 HAML，将其编译为HTML并使用component中的HTML作为templateUrl?

Unless it is supported, how do I have to configure my Angular 2 App (created by the angular-cli version 1.0.0-beta.26) to write HAML, compile it to HTML and use the HTML in the component as a templateUrl?

编辑Angular/cli 使用 webpack.我不知道如何配置 webpack 以在捆绑所有内容之前将 haml 呈现为 html.如何在 Angular 中使用 haml-loader?

EDIT Angular/cli uses webpack. I do not know how to configure webpack to render haml to html before everything will be bundled. How do I use haml-loader inside of Angular?

推荐答案

是的，这绝对是可能的.如果您使用 angular-cli，您首先需要访问 webpack.config.js 文件.您可以输入

Yes, it is definitely possible. If you are using angular-cli you will first need to get access to the webpack.config.js file. You can do this by typing

$ ng eject

这将公开您需要编辑的配置文件.请注意，在此之后，您将需要使用npm start"启动服务器.而不是ng serve".

This will expose the config file, which you need to edit. Notice that after this you will need to start your server with "npm start" instead of "ng serve".

对于haml，您可以使用haml-haml-loader

For haml you can use the haml-haml-loader

npm install haml-haml-loader --save-dev

然后在 webpack.config.js 文件中的模块规则下添加以下规则:

Then under your module rules in the webpack.config.js file add the following rule:

module: {
  rules: [
    ...
    {
      test: /\.haml$/, 
      loaders: ['haml-haml-loader']
    },
    ...

最后修改您的组件以使用您的haml"文件方式如下:

Finally modify your component to use your "haml" file in the following way:

@Component({
  selector: 'app',
  template: require('./app.component.haml'),
  styleUrls: ['./app.component.sass'],
})

或者你可以使用

templateUrl: './app.component.haml',

这应该能让你开始使用haml

This should get you up and running with haml

这篇关于带有 Haml 的 Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！