Merubah simbol data binding pada Angular JS

angular

Bagi yang sering menggunakan Angular JS pasti sudah tidak asing lagi dengan simbol ini kan:

{{ product.title }}

Simbol {{..}} digunakan untuk mencetak sebuah nilai ke browser, hampir sama dengan sintaknya templating system Django/Jinja2.

Kebetulan kemarin saya sedang mencari sebuah templating engine yang mirip Django/Jinja2 di NodeJS, akhir nya ketemu dengan Swig.

Nah masalahnya timbul ketika saya mencoba menggunakan Swig sebagai backend templating engine dan sekaligus juga menggunakan Angular JS di front-end.

Hal ini di sebabkan karena Angular dan Swing sama-sama menggunakan simbol data binding (Simbol untuk mencetak nilai sebuah variable) yang sama yaitu {{ .. }}.

Ini akan terjadi sedikit konflik karena sintak yang seharusnya saya maksudkan supaya dibaca Angular, ternyata terlebih dahulu di baca Swig di server, dan akan di hapus oleh Swig ketika variable tersebut tidak ada di dalam konteksnya Swig.

Ini tentu saja menjadi sebuah masalah, namun dengan sedikit Googling solusinya segera di dapat, yaitu dengan merubah simbol {{..}} di Angular dengan simbol lain, misalnya disini saya akan ubah menjadi [[..]].

Caranya, cukup modifikasi sedikit code untuk initialisasi aplikasi Angular JS (ng-app) nya:

// Code aslinya:
var dashboardApp = angular.module('dashboardApp', []);

// Di ubah menjadi:
var dashboardApp = angular.module('dashboardApp', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Dan selesai, mulai sekarang setiap akan mencetak variable di front-end, tinggal gunakan format [[ variable_name ]].

Catatan: Trik ini hanya diperlukan ketika kita berhadapan dengan penggunaan Angular JS dengan templating engine sejenis Django/Jinja2, Swig (Js/NodeJS) dan Twig (PHP).

DEMO


Semoga berguna.

Leave a Reply

Your email address will not be published. Required fields are marked *