Using Laravel 5 with AngularJS blade tag conflict

Question

I am trying to setup Angular with Laravel 5.

I have tried doing in appServiceProvider:

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

With:

<div>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <h1>Hello, {{ yourName }}!</h1>
</div>

But I'm getting:

Use of undefined constant yourName - assumed 'yourName'...

Answer 1

When doing changes that have to do with Blade (Extending Blade, changing the tags etc) always make sure to delete the cached views.

They're located in storage/framework/views.

Just delete all files (except the .gitignore)

If you want something a bit more practical you can create a command to do that. Like this one

Answer 2

The easiest way to do this is to simply use @ in front of your Angular code:

 <div>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <h1>Hello, @{{ yourName }}!</h1>
</div>

source

Answer 3

Laravel >= 5.3

While adding @ in front of the braces does still work, Laravel has also included another handy blade utility that lets you mark an entire block as-is:

@verbatim
<div>
    {{ ctl.variable1 }}
    {{ ctl.variable2 }}
</div>
@endverbatim

Particularly helpful if you're not doing much with the Blade template rendering

Answer 4

Else you modify angular syntax...

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