Angular2与Haml [英] 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 App(由angular-cli版本1.0.0-beta.26创建)写入HAML，将其编译为HTML，并在其中使用HTML component作为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

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