I need implement this: https://github.com/pshevtsov/flashcards into my Laravel Blade View. I tried to install angular and link all files in blade file. but it doesn't work, because laravel and angular use {{ }} in files.
Add a comment
|
6 Answers
In Laravel 5 you can tell Blade to ignore curly braces by doing
@{{ $name }}
answered May 14, 2015 at 16:27
Antonio Carlos Ribeiro
87.9k22 gold badges220 silver badges205 bronze badges
Comments
You can set custom AngularJS curly braces to prevent conflict with Blade template engine:
var app = angular.module('app', [])
.config(function($interpolateProvider) {
// To prevent the conflict of `{{` and `}}` symbols
// between Blade template engine and AngularJS templating we need
// to use different symbols for AngularJS.
$interpolateProvider.startSymbol('<%=');
$interpolateProvider.endSymbol('%>');
});
I suggest to use <%= %> because it's the often used construction, you can find it in Underscore templates.
After that Angular code will look like this:
<li ng-repeat="phone in phones">
<p><%= phone.name %></p>
</li>
Comments
As of Jan 2016 one needs to do only this:
download
app.jsfrom Angular homepage.find
function $InterpolateProvider() {
var startSymbol = '{{';
var endSymbol = '}}';
and chenge them into whatever, I guess an unofficial practice is <% %>
function $InterpolateProvider() {
var startSymbol = '<%';
var endSymbol = '%>';
The credit should go to https://scotch.io/quick-tips/quick-tip-using-laravel-blade-with-angularjs
Comments
In blade template I code like this:
<div ng-repeat="item in items" class="item" ng-cloak><?='{{item.name}}'?></div>
Comments
Laravel 5.3 version introduced a new command to mark the block “as-is”, without parsing:
@verbatim
Hello, {{ name }}.
@endverbatim
Comments
Copy and paste from https://www.trioangle.com/blog/how-to-use-angularjs-in-laravel-blade/
Method 1: Change AngularJS Tags
var sampleApp = angular.module(‘app’, [], 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.
Method 2: Change Laravel Tags
Blade::setContentTags(‘<%’, ‘%>’); // for variables and all things Blade
Blade::setEscapedContentTags(‘<%%’, ‘%%>’); // for escaped data
Variables will be: <% $variable %>. Comments will be: <%– $variable –%>. Escaped data will look like: <%% $variable %%>. You can also change this to anything your heart desires.
Method 3: Without changing any Tags
@{{ variableName }}
Now Laravel will use the {{ variableName }} and Angular will use @{{ variableName }}.
I’ve explained you all the methods of AngularJS usage in Laravel Blade and You are recommended to use Method 3.
