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 directives "double curly brackets" when displaying variables.
<code>{{ variableName }}</code>Change the Angular Directive
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 Directive 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 dataVariables 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 @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 @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.
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.
Be the first one to write a response :(
{{ reply.member.name }} - {{ reply.created_at_human_readable }}