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!

6 thoughts on “ The Simplest Way To Use Laravel Blade And AngularJS Together ”

  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.

    Like

  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
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
    })
    .config(.....

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

    Like

Leave a Reply to mary anne Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s