क्लाइंट साइड हैम

Question

के साथ angularjs मैंने अपने रेल ऐप के साथ एंगुलरजेएस का उपयोग करना शुरू कर दिया है और जैसा कि मुझे रेल के अंदर हैमल टेम्पलेट्स का उपयोग करने के लिए उपयोग किया जाता है, मैं क्लाइंट साइड पर एंगुलरजेएस के साथ ऐसा करना चाहता हूं। समस्या यह है कि मुझे नहीं पता कि हैमल फ़ाइल में कहां पढ़ना है।

मेरे पास निवेशकों के लिए एक मॉडल है और मैं 'शो' टेम्पलेट को हॉल पर बदलने की कोशिश कर रहा हूं क्योंकि यह शुरू करना सबसे आसान है।

यहाँ मेरी 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}) 

बैकएंड में मेरे पास एक रेल 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 की आईडी के साथ div में डाल देंगे। हालांकि AngularJS निवेशक के नाम पर हैमल कोड के भीतर {{investor.name}} को नहीं बदलेगा क्योंकि ऑपरेशन में बहुत देर हो चुकी है।

इस तरह एंगुलरजेएस प्रोजेक्ट के भीतर मैं क्लाइंट साइड हैमल टेम्पलेट्स को सही ढंग से कैसे कार्यान्वित करूं?

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 

यह अपने टेम्पलेट के लिए गुंजाइश में सभी रेल सहायकों जोड़ देगा। फिर आप टेम्पलेट यूआरएल को कोणीय में पास कर सकते हैं और यह स्वचालित रूप से आपके लिए सभी पैर काम करेगा!

Answer 2

मेरा दृष्टिकोण "application.js 'फ़ाइल में $ टेम्पलेट कैश का उपयोग करने के लिए संपत्ति संकलन समय पर सर्वर पक्ष पर सभी हैम प्रस्तुत करना है। कोड के लिए चेकआउट http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading।