Using Laravel Blade with AngularJS

  • If a file is going to use Laravel Blade, then it should be 100% Blade.
  • We have updated the article to show ways to completely separate your Blade and Angular code.
  • Laravel uses Blade and Blade comes with a way to change the tags.
  • Get Laravel Blade and Angular To Play Nicely
  • While the tips above allow you to use Laravel Blade and AngularJS in the same file, you should strive to keep a separation between the two.

I just recently got into development with AngularJS and am loving my time with it. It makes a lot of things…

@ankosft: Using #Laravel Blade with #Angular JS

I just recently got into development with AngularJS and am loving my time with it. It makes a lot of things much cleaner and easier to do.

I came from PHP and have recently begun to work a lot with Laravel. It is a great time to be in PHP since Composer has come along and made package management a breeze.

I’ll cut right to the chases. Laravel’s Blade templating engine and Angular use the same markup when displaying variables.

Both Laravel and Angular use the double curly brackets.

. Just like that, you can use Laravel Blade and Angular. You can also change this to anything your heart desires.

Laravel uses Blade and Blade comes with a way to change the tags. If you want to keep the Angular syntax default, then use this method.

file. I’m sure there’s a better place to put it, but that’s just where it lives in my code.

) where you could place all your Angular code.

Laravel folder. Just like that, we have separate files for Blade and for Angular. Thanks to Michael Calkins for the tip.

This is the method that I’ve been using lately. Just remove Blade altogether and let Angular handle the includes and routing portions of our app. This provides a good separation of backend and frontend so that you know that all the information on your page is displayed by Angular.

Our Angular frontend requests information from our Laravel backend. Laravel returns some JSON. We then display it to our users.

Here is the Laravel route.

file, you are free to create an all Angular application complete with controllers, services, and routing.

It’s Magic!

Whether you want to change the Angular or Laravel syntax, there’s an easy way to do either… or neither!

While the tips above allow you to use Laravel Blade and AngularJS in the same file, you should strive to keep a separation between the two. If a file is going to use Laravel Blade, then it should be 100% Blade. Same goes for Angular. We have updated this article to show ways to completely separate your Blade and Angular code. We will also be writing up a way to truly use Laravel and Angular together soon.

We’ve recently written an article on how to Creating a Laravel and Angular Single Page Comment Application. Give it a read to see best practices when using Laravel and Angular.

Using Laravel Blade with AngularJS

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.