SORU
10 ŞUBAT 2013, Pazar

Kullanarak turbolinks ile angularjs

Angularjs benim app çerçeve turbolinks ile kullanmaya çalışıyorum. Sayfa değişikliğinden sonra yeni eventlisteners başlatılamıyor. O iş yapmak için herhangi bir yolu var mı? Şimdiden teşekkürler!

CEVAP
18 Mart 2013, PAZARTESİ

AngularJS vs Turbolinks

TurbolinkssıraAnguluarJSkullanıcı etkileşimine yanıt olarak bir şey ve tüm sayfayı yeniden yeniden işlenmesinden olmadan web sayfasında olur hem de bir web uygulaması daha hızlı yanıt yapmak için kullanılabilir, anlamda.

Şu açıdan da farklı:

  • AngularJSbir oluşturmak için yardımcı olurzengin istemci tarafı uygulamanereye JavaScript kodu bir çok yazmak istemci makine üzerinde çalışır. Bu kod, sitenin kullanıcı etkileşimli hale getirir. Sunucu tarafında arka uç ile iletişim kurar, yani Raylar app, JSON API kullanarak.

  • Turbolinksöte yandan, sitenin etkileşimli bir JavaScript kodu gerek kalmadan yapmak için yardımcı olur. Sana izin verirRuby/Rails kodu için sopasunucu tarafı ve hala üzerinde çalışan "sihirli" AJAX yerine, ve bu nedenle rerender, değişti. bu sayfanın tek parça

Nerede Turbolinks güçlü olarak kullanmanızı sağlayan bu güçlü AJAX mekanizması olmadan bir şey yapıyor elle ve sadece kod Ruby/Rails, orada belki bir aşama olarak uygulamanız yetişir, nerede olacak gibi entegre bir JavaScript çerçeve gibi AngularJS.

Özellikle arda uygulamanız, bir defada bir bileşen içine AngularJS entegre etmek istediğiniz bu intermedium aşamada, gayet mantıklı Açısal JS çalıştırmak için yapabilir ve birlikte Turbolinks.

Nasıl AngularJS ve Turbolinks birlikte kullanmak için

Geri el ile Açısal bootstrap kullanın

Açısal kodunuzu, uygulama modül, böyle bir şey kullandınız:

# app/assets/javascripts/angular-app.js.coffee
# without turbolinks
@app = angular.module("YourApplication", ["ngResource"])

Bu kod sayfa yüklendiğinde çalışacak. Ama beri Turbolinks sadece yerine bir kısmını sayfa ve engeller bütün bir sayfa yük, her zaman emin olun, açısal uygulama düzgün başlatılamadı ("önyüklenen"), sonra bile bu kısmi yükler tarafından yapılan Turbolinks. Bu nedenle, aşağıdaki kod ile yukarıdaki modülü bildirim değiştirin:

# app/assets/javascripts/angular-app.js.coffee
# with turbolinks
@app = angular.module("YourApplication", ["ngResource"])

$(document).on('ready page:load', ->
  angular.bootstrap(document, ['YourApplication'])
)

Otomatik olarak önyükleme yok

Genellikle Açısal bir uygulama otomatik olarak HTML kodu ng-app özniteliğini kullanarak bootstrap için nasıl öğreticiler bakın.

<!-- app/views/layouts/my_layout.html.erb -->
<!-- without turbolinks -->
<html ng-app="YourApplication">
  ...

Ama birlikte bu mekanizma manuel bootstrap yukarıda gösterilen kullanarak uygulama iki kez bootstrap ve, bu nedenle, fren uygulamasına neden olur.

Böylece, sadece ng-app Bu özniteliği kaldırın:

<!-- app/views/layouts/my_layout.html.erb -->
<!-- with turbolinks -->
<html>
  ...

Daha Fazla Okuma

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
Ruby-On-RaylarRuby-on-railsAngularjsTurbolinks

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • kev5124

    kev5124

    9 Kasım 2008
  • Peter Sharp

    Peter Sharp

    11 ŞUBAT 2013
  • Phymec

    Phymec

    18 Temmuz 2009

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR