2012-12-14 20 views
6

Rails uygulamam ile AngularJS'yi kullanmaya başladım ve Rails içindeki haml şablonlarını kullanmaya alışkın olduğum için, istemci tarafında AngularJS ile aynı işlemi yapmak istiyorum. Sorun, haml dosyasında nerede okuyacağımı bilmiyorum.istemci tarafındaki hamleli angularjs

Yatırımcılar için bir modelim var ve 'show' şablonunu başlamak için en kolay hamleye dönüştürmeye çalışıyorum. İşte

benim angularjs kod göstermek ilişkin olup

investors.js.coffee

İşte
# 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'] 

benim denetleyicisi angularjs kodudur

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

Arka uçta bir Rails JSON API var. İşte

angularjs bakarak başlamadan önce bir .haml ve templateURL bu geçmek ve onu derlemeye eklentisi haml_coffee_assets almak istiyorum Sonuçta

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

yılında okur show.html dosyasıdır dinamik alanlar ve içeriği değiştirerek.

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

Şu anda bu Haml dönüştürmek ve Haml ait kimlikli div içine koyacağız. Ancak, AngularJS, haml kodu içindeki {{investor.name}} yatırımcının ismini, işlemin çok geç olduğu şekilde değiştirmeyecektir.

İstemci tarafı haml şablonlarını böyle bir AngularJS projesinde düzgün olarak nasıl uygularım?

+1

neden sunucu tarafı haml oluşturma değil? Hamlinizi her zamanki gibi yazın ve sunun ve istemci tarafı uygulamasının dönüştürülmüş html'yi istemesine izin verin. Bu sayede haml filtrelerinden faydalanırsınız ve açılı savaşmazsınız. Aksi takdirde, istemcideki haml şablonlarını ayrıştırdıktan sonra size açısal uygulamayı el ile önyükleme yaparsınız. Denemedim ama işe yarayabilirdi. – jaime

+1

Eğer Rails görüntülerini haml biçiminde kullanacak olsaydım, templateUrl'e ne koyardım? – map7

cevap

8

Tüm Haml şablonlarınızı bir varlıklar/şablonlar klasörüne yerleştirebilirsiniz. Eğer dahil edebilmek istiyorsanız

.html varlıklar/(şablon adının)/dan satışa sunulacak Sonra tüm şablonları

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

: Sonra bu kullanarak Haml hizmet etmek için varlık boru hattı kanca bunun yerine özel bir modülü ve kullanımını tanımlayabilir sizin Haml şablonlarda yardımcıları raylar:

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 

Bu şablonlarınızın kapsam içine tüm raylar yardımcıları ekleyecektir. Daha sonra şablon URL'lerini açısal olarak geçirebilir ve otomatik olarak tüm bacak işlerini sizin için yapar!

+0

Aynı şeyi gerçekleştirmeye çalışıyorum (üzgünüm, bunun eski bir yazı olduğunu biliyorum).Açısal raylar-şablon ve nghaml uzantıları kullanıyorum; Haml çalışıyor, ama yardımcılar değil. CustomHamlEngine'ı bir haml.rb başlatıcısına ekledim ama yine de zar yok. Özellikleri burada yayınladım: http://stackoverflow.com/questions/22976912/rails-app-to-angular-haml-rails-helpers?lq=1 – Morgan