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

you could try <ng-include src="'templateUrl'"></ng-include> that will load template from url — Pankaj Parkar
– Pankaj Parkar, Commented Apr 29, 2015 at 14:38
@pankajparkar because I'm integrating Angular into Laravel. I am already using Laravel conventions, such as {{ $content }}, to load my partials — user3871
– user3871, Commented Apr 29, 2015 at 14:44

Limon Monte · Accepted Answer · 2015-04-29 13:53:58Z

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, 2015 at 13:53

Limon Monte

54.8k49 gold badges191 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3871 Over a year ago

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?

Limon Monte Over a year ago

can't tell what's wrong with your code without looking into it. You can find simple angular app here: jsfiddle.net/Q5hd6

Limon Monte Over a year ago

@Growler maybe you can find answer here stackoverflow.com/a/22407031/1331425

user3871 Over a year ago

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.

Collectives™ on Stack Overflow

Integrating Angular App within Laravel PHP - Unhandled Exception

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related