angularjs with client side haml

Question

私はRailsアプリケーションでAngularJSを使い始めました.Rails内でhamlテンプレートを使用していたので、クライアントサイドでAngularJSと同じことをしたいと思います。問題は、hamlファイルをどこで読むのか分かりません。

私は投資家のためのモデルを持っています。私は 'show'テンプレートをhamlに変換しようとしています。ここで

はここ

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コードは私のコントローラ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があります。ここで

はAngularJSが見て開始する前に、私は.hamlを持っているとtemplateURLにこれを渡して、それをコンパイルするプラグインhaml_coffee_assetsを取得したいと思い結局

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

で、読み込むshow.htmlファイルであります動的なフィールドとコンテンツの変更。

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

現在、これはHAMLを変換し、HAMLのidを持つdiv要素に入れます。しかし、AngularJSは、操作が遅すぎるため、hamlコード内の{{investor.name}}を投資家の名前に変更しません。

このようにAngularJSプロジェクト内にクライアントサイドのhamlテンプレートを正しく実装するにはどうすればよいですか？

Answer 1

すべてのHamlテンプレートをassets/templatesフォルダに入れることができます。あなたは含めることができるようにしたい場合は

.htmlの資産/（テンプレート名）/から利用できるようになります次に、あなたのすべてのテンプレートを

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

：次に、あなたはこれを使用してHAMLを提供するために、あなたの資産パイプラインをフックアップカスタムモジュールを定義し、代わりにそれを使用することができ、あなたの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。