Blade and Angular JS Incompatibility in Laravel 5

Question

I’m having trouble using Angularjs along with Laravel’s Blade. After researching this site myself, I discovered that to resolve the conflict with Laravel the latest method is using the @{{}} in the calls of variables.

The page is loaded, the array is traversed, generating the rows of records, but no information is shown.

Here’s the piece of my code that makes that mistake:

<table class="table table-striped">
    <thead>
        <tr>
            <th ng-click="ordenar('convite.id')">Nº Convite</th>
            <th ng-click="ordenar('convite.numero')">Processo</th>
            <th ng-click="ordenar('convite.descricao')">Descrição</th>
            <th>Lançado em:</th>
            <th></th>           
        </tr>
    </thead> 
    <tbody>
        <tr dir-paginate="convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">
             <td>
                 00 @{{convite.id}} @{{convite.ano}}/NFS
             </td>
             <td>@{{convite.numero}}</td>
             <td>@{{convite.descricao}}</td>
             <td>@{{convite.create_up}}</td>
             <td>
                 <button class="btn btn-info btn-xs" ng-click="editar(convite)">Editar</button>
                 <button class="btn btn-danger btn-xs" ng-click="excluir(convite)">Excluir</button>
             </td>
         </tr>
     </tbody>
 </table>

I also read that I should not use the Blade with Angular, but I find it very practical to use, and I would like to continue. This method is the most correct and recent?

'Cause I’ve already made a few of changing Blade’s keys, interpolating to change Angular’s, and it’s the same mistake.

Page loads without error in Laravel, but does not load the information.

as I am unable to comment I will edit

so far this way

var app = angular.module('cdg',['angularUtils.directives.dirPagination']);

angular.module('cdg').config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

And PHP:

<?php

namespace confin\Providers;

use Illuminate\Support\ServiceProvider;

use Blade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
       Blade::setContentTags('<%', '%>');        
       Blade::setEscapedContentTags('<%%', '%%>'); 
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

<tr dir-paginate=" convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">
                        <td>
                           00 <% convite.id %><% convite.ano %>/NFS
                        </td>
                        <td><% convite.numero %></td>
                        <td><% convite.descricao %></td>
                        <td><% convite.create_up %></td>
                        <td>
                           <button class="btn btn-info btn-xs" ng-click="editar(convite)">Editar</button>
                           <button class="btn btn-danger btn-xs" ng-click="excluir(convite)">Excluir</button>
                        </td>
                     </tr>

but now the error is on this line

<tr dir-paginate=" convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">

Errorexception in b021106ac8c34a8a693202610529e170cbe12876.php line 49: Use of Undefined Constant invitation - assumed 'invitation' (View: C: xampp htdocs confin Resources views invitation.blade.php)

Answer 1

Both Angularjs and Blade give you the option to change the "interpolator".

In the example, I’m changing to <% variavel %>.

No Angularjs

Just create a config injecting $interpolateProvider

angular.module('app', []);

angular.module('app').config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

angular.module('app').controller('mainController', mainControllerFn);

function mainControllerFn(){
  this.nome = "JBueno";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="mainController as ctrl">
    <% ctrl.nome %> <br> <!-- Novo modo - funciona -->
    {{ ctrl.nome }} <!-- Modo antigo, não vai funcionar mais pro AngularJS. Agora a sintaxe {{}} é exclusiva do Blade -->
  </div>  
</div>

In the Blade

Set the interpolator using setContentTags in some configuration class

Example (class in App Providers Appserviceprovider):

class AppServiceProvider extends ServiceProvider
{
    /**
     * @return void
     */
    public function boot()
    {
         \Blade::setContentTags('<%', '%>');        //para variáveis
         \Blade::setEscapedContentTags('<%%', '%%>'); //para dados "escapados"
    }
}

Answer 2

Only as a complement:

I also read that I should not use the Blade with Angular, but I find it very practical to use, and I would like to continue, this method is the most correct and recent?

There is nothing to prove that you should not use Angular Blade. There are even several libraries and courses that teach you how to use them together.

Don’t take for yourself everything they say is wrong. In fact, it is a great choice, if you know how to execute it correctly, use Laravel and Angular in the same project.

Even I have some projects where I use Angular and is very productive.

... Page loads without error in Laravel, but does not load the information.

The reply from @jbueno has already answered your question very well. You can use to change the interpolator (on one side, or in the Blade or Angular) so there can be no conflicts.

Still, you can do as you yourself suggested in the reply: using the @ before the tags {{ and }}.

I suggest opening the console of your browser and check if there is no error message there, since you said that in Laravel there are no errors.

_{If this is the case, let us know if there is an error in the console, to evaluate if you need to edit or ask another question to solve your problem}