How to implement AngularJS app in Laravel Blade

Question

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.

Answer 1

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>

Answer 2

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

@{{ $name }}

Answer 3

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

Answer 4

In blade template I code like this:

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