How to use Angular JS and Laravel 4 without conflicting with Blade?

Question

I would like to know how to configure Laravel 4 to use Angularjs without conflict with Blade, since the interpolation tags are the same?

Answer 1

For you not to conflict, you will have to change the internal processing tags of BladeCompiler of Laravel. Or depending on the case, you can change the AngularJS.

HIGH BLADE

It is possible to do this using the facade class to BladeCompiler, call for Blade (which is an alias, you can check on app.php).

In the archive app/start/global.php of its application, make the following inclusion of code

Blade::setContentTags('[[', ']]');

Blade::setEscapedContentTags('[[[', ']]]');

Observing: It is worth remembering that the Blade has compiled view caching (according to the modification date of your Blade view). So what has been compiled before that needs to be reprocessed, so you don’t get the data before changing the Blade’s open and close tags.

In Laravel 5, you can use the command php artisan view:clear to clear the views that were compiled in the old interpolation.

ANGULAR JS

If it is laborious or you don’t want to change the syntax of Bladecompiler, you can change the interpolation tags of AngularJS. You can use the following method:

var myApp = angular.module('myApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Updating

It is possible in Laravel to escape the interpretation tags {{ }} using the arroba (@). So, since the angular interprets these keys in the DOM, then you could do so:

 {{ $codigo_laravel }}

 @{{ codigo.angular }}

Another example:

<input type="name" data-id="@{{ user.id }}" />