Integrating Angular App within Laravel PHP - Unhandled Exception

Question

I have a laravel app which I'd like to add in an Angular frontend.

My index file, main.blade.php, specifies the name of the app. Here is the structure of my main page... where html partials are piped in through {{ $content }}:

<!doctype html>
<html lang="en" ng-app="myApp">
<head> 
   ...
</head>
<body>
   <div id="main-container">
      <header>
          ...
      </header>

     {{ $content }}

     <footer>
          ...
     </footer>
    </div>
   </body>
</html>

I have another partial page, private events:

<div id="inner-container" class="events" ng-controller="myCtrl">
    <li ng-repeat="phone in phones">
        <p>{{phone.name}}</p>
    </li>
     ...
</div>

And then a controllers.js file:

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

myApp.controller('myCtrl', function($scope) {
    $scope.phones = [
        {'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.'},
        {'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.'},
        {'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.'}
    ];
});

I'm getting an Unhandled exception: Error rendering view: [content.private-events]. Use of undefined constant phone - assumed 'phone'

Given my file structure, can't I just link in an Angular app like that? Do I have to add the controller name to the tag, or can I use any DOM element container?

Thanks

@pankajparkar because I'm integrating Angular into Laravel. I am already using Laravel conventions, such as `{{ $content }}`, to load my partials — user3871, Apr 29 '15 at 14:44

score 4 · Accepted Answer · answered Apr 29 '15 at 13:53

4

You need to change AngularJS curly braces not to 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>

answered Apr 29 '15 at 13:53

Limon Monte

52,539
45
182
213

Thanks for this. I tried doing this then got error `Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available!` Why would this be the case? – user3871 Apr 29 '15 at 14:06
can't tell what's wrong with your code without looking into it. You can find simple angular app here: http://jsfiddle.net/Q5hd6/ – Limon Monte Apr 29 '15 at 14:11
@Growler maybe you can find answer here http://stackoverflow.com/a/22407031/1331425 – Limon Monte Apr 29 '15 at 14:12
Okay. But also, I'm getting the escaped html output to the page from the controller, appearing as `<%= phone.name %>`, meaning it's not interpreting the `startSymbol/endSymbol` thing correctly. – user3871 Apr 29 '15 at 14:13

Integrating Angular App within Laravel PHP - Unhandled Exception

1 Answers1