angularjs with client side haml

Question

I've just started using AngularJS with my Rails app and as I'm used to using haml templates within Rails I would like to do the same with AngularJS on the client side. Problem is I don't know where to read in the haml file.

I have a model for investors and I'm trying to convert the 'show' template over to haml as it's the easiest to start with.

Here is my AngularJS code relating to show

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']  

Here is my controller AngularJS code

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})

In the backend I have a Rails JSON API.

Here is the show.html file it reads in

<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>

Ultimately I would like to have a .haml and pass this to the templateURL and get the haml_coffee_assets plugin to compile it before AngularJS starts looking at the dynamic fields and changing the content.

Ref: https://github.com/netzpirat/haml_coffee_assets

Currently this will convert the haml and put it into the div with id of haml. However AngularJS will not change the {{investor.name}} within the haml code to the investor's name as it's too late in the operation.

How do I properly implement client side haml templates within an AngularJS project like this?

Answer 1

You can put all of your Haml templates inside an assets/templates folder. Then you hook up your asset pipeline to serve Haml using this:

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

Then all of your templates will be available from /assets/(template name).html

If you want to be able to include rails helpers within your Haml templates you can define a custom module and use that instead:

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

This will add all the rails helpers into the scope for your templates. Then you can pass in template urls to angular and it will automagically do all the leg work for you!

Answer 2

My approach is to render all the haml on the server side at asset compilation time into the 'application.js' file use $templateCache. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading for the code.