How to use AngularJS and Laravel Blade together



In this article I will show you how to use AngularJS and Laravel Blade together.
People who have been using AngularJS for a while may know of this solution. However if you are just getting started or have never used Angular with a templating engine like Blade, read ahead!

The problem

When it comes to making AngularJS and Laravel Blade work together, there is only one real problem. Both AngularJS and Laravel Blade use double curly brackets for opening and closing tags. Luckily there is a quick and painless solution for this problem!

The solution

The solution for making AngularJS and Laravel Blade work together is simple. We can simply use Angular’s $interpolateProvider to change the tags.



In short: we want to change the tags of AngularJS to anything other than double curly brackets, for example a double percentage sign.

Example code would be:

var customInterpolationApp = angular.module('customInterpolationApp', []);

customInterpolationApp.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('%%');
  $interpolateProvider.endSymbol('%%');
});

You can now freely use %% for AngularJS and the usual {{ and }} for Laravel Blade!
If you liked this quick little tip, please share it on TwitterFacebookStumbleUpon, …

Thank you for reading!

Share the knowledge!
Share on Facebook20Tweet about this on Twitter303Share on Google+11Share on StumbleUpon277Share on Reddit1Share on LinkedIn4Share on TumblrBuffer this pageDigg this

Comments

You may also like...

x
Stay updated