AngularJS and Laravel Blade: Module Error when cha

问题:

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

回答1:

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.

回答2:

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.