5 Ways to Solve Angular and Blade Conflict

If you work with AngularJS and Laravel project, you might come across a conflict of the same syntax - both Angular and Blade use {{ }} brackets for variables. How to avoid errors? Actually, there's more than one option here.

Option 1. Override Blade syntax

Did you know that you can change default Blade tags? It's simple:

    \Blade::setRawTags("[[", "]]");
    \Blade::setContentTags('<%', '%>'); // for variables and all things Blade
    \Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data

Option 2. Changing Angular syntax

var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

Option 3. Adding @ symbol before any variable in Blade

<h1>Hello, @{{ yourName }}!</h1>

Option 4. Laravel 5.3+ new directive verbatim

Laravel 5.3 version introduced a new command to mark the block "as-is", without parsing:

@verbatim
    

        Hello, {{ name }}.
    
@endverbatim

Option 5. Just don't mix them together

Looking at how people mix front-end and back-end frameworks together, more and more I realize that the best and the most correct way is to actually choose - whether your project is back-end or front-end first.

What I mean: if you work with Laravel better, then use Blade and don't overuse Angular - leave that for routing purposes and some bindings but avoid using it in Blade. Or, even better, build a whole Angular project with Laravel being just an API layer for data management. That's what cool guys do these days - this way you can use the same back-end API for different front-end platforms, mobile apps and other devices.

What option do you like best? Have you encountered any problems at all while using Angular and Laravel?