The Simplest Way To Use Laravel Blade And AngularJS Together

By default AngularJS and Blade conflict with the way variables are called. Both use a double curly bracket {{ var }} syntax. There are a few workarounds such as changing Angular’s or Blade’s delimiters but an easier method is available.

Inside blade prefix Angular echo variables with the at “@“ symbol. Here is an example:

This will prevent blade from parsing it but will be correct when sent to the browser.

Nice and simple!


  1. Depending on the amout of Angular bindings, you could also place it in a seperate partial angular-partial.php and include it using @include(‘angular-partial’).
    The filename is an example, but notice is doesn’t have the .blade.php in it.

  2. I tend to do the following and change the angularjs syntax:

    var ngApp = angular.module('ngApp', ['module'], function($interpolateProvider){
    //-- as the output conflicts with blade lets alter the defaults

    SO then i can use the normal blade syntax and then [[ & ]] for my angular code.

  3. If you do change the Blade syntax in Laravel 5 the escaped content method is changed:

    Blade::setContentTags(‘[[‘, ‘]]’);
    Blade::setRawTags(‘[!!’, ‘!!]’);

Leave a Reply