0

I have a strange problem when combining Laravel 5 (with Blade) and Angular 1.3.

I am experienced with Laravel, but a newbie with Angular. I know that I have to change Angular's delimiters to be able to make it work with Laravel's Blade.

So here is what I did:

//app.js

(function(){

var app = angular.module('TeamManager', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});



  app.controller('TeamController', function(){

    // Do Something
  });

})();

An in my View-File I definded ng-app and ng-controller. My goal is to iterate through a JSON. The JSON is not part of the JS above - I am aware of that.

<div class="container" ng-app="TeamManager">

<hr>
<div class="row" ng-controller="TeamController as team">
    <div class="col-xs-4">
        <div class="teamlist-container">
            <table class="table table-striped">
                    <tr ng-repeat='member in teammembers'>
                        <td><% member.firstname %>&nbsp;<% member.lastname %></td>
                    </tr>
                </table>
        </div>
    </div>      

</div><!-- /row -->
<hr>

If I leave out the $interpolateProvider code, everything work and no errors are shown on the console. With it - however - nothings runs anymore. I get a Uncaught Error: [$injector:modulerr]

When I follow it, I come to: Error: $injector:unpr Unknown Provider

Am I missing something? I tried code from AngularJS Docs and some Tutorials. So it should be fine. Every time I was running in this error and it is driving me crazy.

I someone could help me with this, I would really appreciate it.

Many thanks, AFX

AFX
  • 356
  • 3
  • 13

2 Answers2

2

I don't think your injecting the provider correctly, it should be in a callback for the config method of your app.

Try:

var app = angular.module('TeamManager', []);

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

Update: in the case of the OP, the minifying process wasn't jiving with the angular syntax being used. The asker would need to inject dependencies in the following way to use with minify/uglify:

var app = angular.module('TeamViewer', ['deps', function(deps) {
    //...
}]);

And:

app.config(['$interpolateProvider', function($interpolateProvider) {
    //...
}]);

This syntax is minify and uglify safe.

Matthew Brown
  • 4,876
  • 3
  • 18
  • 21
  • Thanks, Matthew! I tried this one already and now again. Same behaviour. Still an error ;-/ – AFX Apr 29 '15 at 17:59
  • 1
    Are you minifying or using any sort of build process? Also, I noticed `<%` & `%>` are ASP tags, not that it matters - but what happens when you try different symbols? Like '//' & '\\' same I imagine? Can you post more of your code? like the index? – Matthew Brown Apr 29 '15 at 18:01
  • IT WORKS! I minified the JS code with CodeKit. It switched that off and now it works just fine. I am an idiot! Thanks for your help! – AFX Apr 29 '15 at 18:19
  • Sure, see updated answer for methods on continuing use of codekit while having this work. – Matthew Brown Apr 29 '15 at 21:21
1

You don't have to change $interpolate. To use the default {{ }} delimiters for angular, simply add @{{}}, and blade will let javascript handle that for you.

gngchrs
  • 468
  • 4
  • 11