AngularJS与客户端Haml的结合

Question

我刚开始在我的Rails应用程序中使用AngularJS，因为我习惯于在Rails中使用Haml模板，所以我希望在客户端中使用AngularJS时也能这样做。问题是我不知道在哪里读取Haml文件。

我有一个投资者模型，我正在尝试将“show”模板转换为Haml，因为它是最容易入手的。

这是与show相关的我的AngularJS代码：

investors.js.coffee

  # Setup the module & route
  angular.module("investor", ['investorService'])
    .config(['$routeProvider', ($provider) ->
      $provider
        .when('/investors/:investor_id', {templateUrl: '/investors/show.html', controller: 'InvestorCtrl'})
    ])
    .config(["$httpProvider", (provider) ->
      provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
    ])

  angular.module('investorService', ['ngResource'])
    .factory('Investor', ($resource) ->
      return $resource('/investors/:investor_id.json', {}, {
        show: {method: 'GET'},
      })
    )

  angular.bootstrap document, ['investor']  

这是我的AngularJS控制器代码

investors_controller.js.coffee

# Show Investor
window.InvestorCtrl = ($scope, $routeParams, Investor) ->
  html = haml.compileHaml({sourceId: 'simple'})
  $('#haml').html(html())

  investor_id = $routeParams.investor_id
  $scope.investor = Investor.show({investor_id: investor_id})

我在后端有一个Rails JSON API。

这是它读取的show.html文件

<script type="text/haml-template" id="simple">
  %h1 {{investor.name}}
</script>

<div id="haml"></div>

<h1>{{investor.name}}</h1>

<p>
  <b>Total Cost</b>
  {{investor.total_cost}}
</p>

<p>
  <b>Total Value</b>
  {{investor.total_value}}
</p>

<a href='/investors/angular#/investors/{{investor.id}}/edit'>Edit</a>
<a href='/investors'>Back</a>

最终我想要一个.haml文件，并将其传递给templateURL，在AngularJS开始查看动态字段并更改内容之前，让haml_coffee_assets插件对其进行编译。

参考：https://github.com/netzpirat/haml_coffee_assets 目前这会将HAML转换并放入ID为haml的div中。但是，由于操作太晚，AngularJS无法将HAML代码中的{{investor.name}}更改为投资者的姓名。

如何在类似于此类AngularJS项目中正确实现客户端HAML模板？

- map7

---

为什么不使用服务器端的Haml渲染？像往常一样编写和提供你的Haml，让客户端应用程序请求转换后的HTML。这样你就可以利用Haml的过滤器而不与Angular对抗。否则，你将在客户端解析Haml模板后手动引导你的Angular应用程序。我没有尝试过，但它可能会起作用。 - jaime

如果我要使用Haml格式的Rails视图，那么在templateUrl中我应该放什么？ - map7

Answer 1

您可以将所有的Haml模板放置在assets/templates文件夹中。然后，您可以使用以下代码将您的资源管道连接到服务Haml：

Rails.application.assets.register_engine '.haml', Tilt::HamlTemplate

那么你的所有模板都将在 /assets/(模板名称).html 中可用。

如果您想在Haml模板中使用Rails助手，可以定义一个自定义模块并使用它：

module CustomHamlEngine
  class HamlTemplate < Tilt::HamlTemplate
    def evaluate(scope, locals, &block)
      scope.class_eval do
        include Rails.application.routes.url_helpers
        include Rails.application.routes.mounted_helpers
        include ActionView::Helpers
      end

     super
    end
  end
end

Rails.application.assets.register_engine '.haml', CustomHamlEngine::HamlTemplate

这将把所有的Rails助手添加到模板范围内。然后，您可以将模板URL传递给Angular，它会自动为您完成所有的工作！

- sharpper

---

我正在尝试完成相同的事情（抱歉，我知道这是一个旧帖子）。我正在使用angular-rails-template和nghaml扩展；haml正常工作，但helpers没有。我将您的CustomHamlEngine添加到haml.rb初始化程序中，但仍然无法解决问题。我在这里发布了具体信息：http://stackoverflow.com/questions/22976912/rails-app-to-angular-haml-rails-helpers?lq=1 - Morgan

Answer 2

我的做法是在资产编译时将所有的Haml渲染到服务器端的“application.js”文件中，使用$templateCache。请查看http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading获取代码。

- Khaja Minhajuddin