Beranda » Tutorial » Mengatasi Conflicts tags {{ }} angularjs pada laravel

Mengatasi Conflicts tags {{ }} angularjs pada laravel

Pada kali ini penulis akan menjelaskan dengan simpel cara mengatasi conflicts tags pada laravel, langsung saja ke TKP gan

bagi anda pengguna laravel yang ingin mengabungkan dengan angularjs mungkin akan terjadi error sintax {{ }}
error ini di sebabkan karena template engine blade pada laravel juga menggunakan tags yang sama sehingga terjadi konflik syntax antara tags blade dan angular

kemudian bagaimana cara mengatasinya???

ada beberapa cara untuk mengatasinya:
1. cara yang paling mudah yaitu dengan menambahkan @ diawal syntax angular nya

misal : kita punya code blade seperti di bawah ini

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

kode diatas jika kita coba di blade laravel maka akan terjadi error cara mengatasinya adalah dengan menambahkan @ di awal syntax angular nya

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello @{{yourName}}!</h1>
</div>
</body>
</html>

seperti kode di atas silakan coba maka angular dan laravel akan bekerja dengan baik

2. kemudian cara yang kedua yaitu dengan mengubah awal dan akhir tags angularnya nya.
dengan mendefinisikan tags baru untuk angularjs

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', [], function($interpolateProvider){
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello <%yourName%>!</h1>
</div>
</body>
</html>

cara yang kedua dengan mengubah syntax untuk angularnya seperti kode di atas

ok mudah bukan selamat mencoba

jangan lupa tinggalkan jejak ya