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
@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.
Using Laravel Blade with AngularJS
Reviewed by Unknown
on
December 20, 2017
Rating:
Reviewed by Unknown
on
December 20, 2017
Rating:
No comments: