与客户端HAML angularjs(angularjs with client side haml

我刚开始使用AngularJS与我的Rails应用程序，当我已经习惯了使用Rails内部HAML模板，我愿做同样的在客户端AngularJS。 问题是我不知道在哪里的HAML文件中读取。

我有投资者模型和我想的“秀”模板在转换为HAML，因为它是最容易下手。

这是我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并获得haml_coffee_assets插件AngularJS开始盯着动态域和更改内容之前进行编译。

参考： https://github.com/netzpirat/haml_coffee_assets

目前，这会转换HAML，放入股利与HAML的ID。 然而，因为它是在操作太晚AngularJS不会在{{investor.name}}的HAML代码内改变投资者的名字。

如何正确实施AngularJS项目这样的内客户端HAML模板？

Answer 1:

你可以把你所有的Haml的模板的资产/模板文件夹内。 然后你钩住你的资产管道使用该服务Haml的：

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

然后，所有的你的模板将可以从/资产/（模板的名称）的.html

如果你希望能够包括在您Haml的模板轨道助手，你可以定义自定义模块，并用它来代替：

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

这将增加所有钢轨助手到范围为你的模板。 然后，你可以通过在模板的URL的角度，它会自动地做所有的专家组的工作为您服务！

Answer 2:

我的方法是使所有的资产在编译时服务器端的HAML进入“的application.js”文件使用$ templateCache。 结帐http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading的代码。

文章来源: angularjs with client side haml