CODEWITHSUNDEEP
angularjslaravellaravel-blade
Orthanc Minas
Orthanc Minas

Reputation: 53

How to implement AngularJS app in Laravel Blade

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.

Upvotes: 3

Views: 6342

Answers (6)

Prahsant Sharma
Prahsant Sharma

Reputation: 350

Laravel 5.3 version introduced a new command to mark the block “as-is”, without parsing:

@verbatim
        Hello, {{ name }}.
@endverbatim

Upvotes: 1

Md. Robi Ullah
Md. Robi Ullah

Reputation: 2162

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.

Upvotes: 0

Sergey
Sergey

Reputation: 5207

In blade template I code like this:

<div ng-repeat="item in items" class="item" ng-cloak><?='{{item.name}}'?></div>

Upvotes: 1

Peter
Peter

Reputation: 2702

As of Jan 2016 one needs to do only this:

  • download app.js from 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

Upvotes: 1

Limon Monte
Limon Monte

Reputation: 54389

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>

Upvotes: 5

Antonio Carlos Ribeiro
Antonio Carlos Ribeiro

Reputation: 87719

In Laravel 5 you can tell Blade to ignore curly braces by doing

@{{ $name }}

Upvotes: 7

Related Questions