Laravel ve AngularJS kullanırken yaşayan {{}} curly braces sorununa çözüm

AngularJS ve Laravel’ in de template sistemi, data binding için aynı syntax’ ı kullanmaktadır. Şu şekilde;

Laravel ve AngularJS’ i kol kola kullanıp bir Single Page Application yaptığınızda bu durum ASLINDA çok fazla sorun çıkarmaz. Çünkü uygulamanızın frontend’ i serverdan HTML dosyasını render edilmeden alır ve kendisi render eder. Lakin, bir kısmı öncelikle backend’ te render edilmesi gereken bir yada birkaç şablonunuz mutlaka vardır. Örneğin main layout gibi. Kullanıcı sisteme giriş yapmış ise, kullanıcı bilgilerini bastırdığınız main layout. 

Bu durumda ne yapılacak ?

Eğerki, verinin laravel tarafında render edilmesini istemiyorsanız, başına @ işareti koymalısınız. Bu sayede, laravel bunu render etmeye çalışmayacak, dolayısıyla hata vermeyecektir. Angularjs te bu kısmı yakalayıp kendisi render edecektir.

Örneğin;

Yukarıdaki kodu incelediğimizde, sayfalarımda basılacak description’ ı laravel’ in değil AngularJS ile yazdığım frontend’ imdeki MetaService adındaki servisimden gelen değer ile render etmek istiyorum. Laravel’ e diyorumki SEN KARIŞMA. Bunu başına @ işareti koyarak yaptım.

Sizin karşılaştığınız problem ÇOK ÇOK farklı olabilir. Öyleyse, kökten çözüm uygulayalım.

Ne demiştik ? her iki framework’ ün de data-binding için kullandığı syntax aynı. Öyleyse ikisinden birinin syntax’ ını değiştirelim.

Laravel’ inki değiştirmek;

Aşağıdaki kodu routes.php dosyasına koyun.

Artık laravel blade lerinizde data-binding yaparken {{ işareti yerine <% işaretini, }} yerine de %> işaretini kullanacaksınız ve işler çözülecek.

AngularJS tarafında değiştirmeyi seçerseniz de;

Yukarıdaki kodu birebir kopyalayıp, angularjs uygulamanıza yapıştırmak gibi bir hata yapmayın sakın !

angularjs te config methodu, ana modüle bağlandığı için ben göstermelik bir uygulama tanımladım uygulamam adı ile, Siz bunu kendi uygulamanıza göre değiştirin!

start symbol ve end symbol ü de kendi zevkine göre değiştirin.

Konu hakkında AngularJS’ in dökümanına da https://docs.angularjs.org/api/ng/provider/$interpolateProvider adresinden ulaşabilirsiniz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir