angularjs với client side haml

Question

Tôi vừa mới bắt đầu sử dụng AngularJS với ứng dụng Rails của mình và vì tôi đã quen sử dụng các mẫu haml trong Rails Tôi muốn làm tương tự với AngularJS ở phía máy khách. Vấn đề là tôi không biết đọc ở đâu trong file haml.

Tôi có một mô hình cho nhà đầu tư và tôi đang cố gắng chuyển đổi mẫu 'hiển thị' sang chế độ haml vì đây là cách dễ nhất để bắt đầu.

Dưới đây là mã AngularJS của tôi liên quan đến hiển thị

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

Đây là mã AngularJS điều khiển của tôi

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

Trong backend tôi có một API JSON Rails.

Dưới đây là file show.html nó đọc trong

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

Cuối cùng, tôi muốn có một .haml và chuyển thông tin này đến templateURL và nhận được haml_coffee_assets cắm để biên dịch nó trước khi AngularJS bắt đầu nhìn vào các trường động và thay đổi nội dung.

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

Hiện này sẽ chuyển đổi các Haml và đặt nó vào div với id của Haml. Tuy nhiên AngularJS sẽ không thay đổi {{investor.name}} trong mã haml thành tên của nhà đầu tư khi quá muộn trong hoạt động.

Làm cách nào để triển khai đúng các mẫu haml phía máy khách trong dự án AngularJS như thế này?

Answer 1

Bạn có thể đặt tất cả các mẫu Haml của mình bên trong thư mục nội dung/mẫu. Sau đó, bạn treo lên đường ống nội dung của mình để phục vụ Haml sử dụng này:

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

Sau đó, tất cả các mẫu của bạn sẽ có sẵn từ/tài sản/(mẫu tên) .html

Nếu bạn muốn để có thể bao gồm Rails người giúp đỡ trong mẫu Haml của bạn, bạn có thể định nghĩa một mô-đun tùy chỉnh và sử dụng thay thế:

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 

này sẽ thêm tất cả các đường ray giúp đỡ vào phạm vi cho mẫu của bạn. Sau đó, bạn có thể vượt qua trong mẫu url để góc cạnh và nó sẽ tự động làm tất cả các công việc chân cho bạn!

Answer 2

Cách tiếp cận của tôi là hiển thị tất cả các haml ở phía máy chủ tại thời gian biên dịch tài sản vào tệp 'application.js' sử dụng $ templateCache. Thanh toán http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading cho mã.