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:
@verbatimHello, {{ 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?
No comments or questions yet...