Using Laravel Blade with AngularJS

Chris Sevilleja

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.

Laravel and Angular Conflicts

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.

<code>{{ variableName }}</code>

Get Laravel Blade and Angular To Play Nicely

Change the Angular Tags

Changing the syntax in Angular is very easy. This can be done when defining your Angular application module using Angular's $interpolateProvider.


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

Now Laravel will use the {{ variableName }} and Angular will use <% variableName %>. Just like that, you can use Laravel Blade and Angular. You can also change this to anything your heart desires.

Change the Laravel Blade Tags

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.


    Blade::setContentTags('<%', '%>');        // for variables and all things Blade
    Blade::setEscapedContentTags('<%%', '%%>');   // for escaped data
 

<

p>Variables will be: <% $variable %>. Comments will be: <%-- $variable --%>. Escaped data will look like: <%% $variable %%>.

I usually place this in my routes.php file. I'm sure there's a better place to put it, but that's just where it lives in my code.

Use An Include From Within Blade

You can load a blade file and from within it, you can use &#64;include() to pull in a non-blade file (angular-stuff.php) where you could place all your Angular code.

<!-- index.blade.php -->
<!doctype html>
<html>
<head>
    <title>Fancy Laravel and Angular</title>

    <!-- load angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
</head>
<body>

    @include('angular-stuff'); <!-- app/views/angular-stuff.php -->

</body>
</html>

The &#64;include() will look from your app/views Laravel folder. Just like that, we have separate files for Blade and for Angular. Thanks to Michael Calkins for the tip.

Don't Use Blade At All

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.

// app/routes.php

    Route::get('/', function() {
        return View::make('index'); // app/views/index.php
    });


Then in your index.php 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!

Ideal Scenario

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.

Laravel and Angular Tutorial

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.

Edit: Added the way to change in Laravel. Edit: Updated Laravel code to show escaped data and comments. Thanks to Oison Conolly for the info. Edit: Added ideal section Edit: Added two more sections

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.