How to use AngularJS in .php file while rendering a laravel view

Question

I am new to laravel and AngularJS . I am trying to render a view which is a php file. The .php file is being rendered but the AngularJS expression inside it is not being evaluated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">     </script>
<script src='public/AngularSorter.js'></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>



<body ng-app = 'store'>
<div ng-controller ='SorterController as sorter'>
 <p>
   {{ 4+4 }}

 </p>
</div>
</form>
</body>
</html>

the route is like this

Route::get('/', function () {
 return view('Home');
  });

Am I missing something? I tried renaming the php file to .html but it doesn't work. why can't the view render .html file??.

I get the output as {{4+4}} instead of 8.

If you view source on the page, does it still say {{ 4+4 }}, does it say 8, or does it say nothing? Laravel blade and angularjs use the same syntax, so you'd have to change one of the two. — Mikel Bitson
– Mikel Bitson, Commented Oct 29, 2015 at 17:48
I'd appreciate it if you picked an answer when you've got your problem solved. If you need more assistance to understand the answer, let me know! I'm here to help :) — Mikel Bitson
– Mikel Bitson, Commented Oct 29, 2015 at 18:22

Mikel Bitson · Accepted Answer · 2015-10-29 17:50:42Z

2

Laravel Blade and AngularJS use the same syntax for processing variables, {}. To avoid this, you have to either change the syntax for blade or change the syntax for AngularJS. Details here.

Changing the AngularJS Syntax:

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

- or -

Changing the Laravel Blade Syntax:

// You may place this code anywhere it is executed each request. Some people have used routes.php
Blade::setContentTags('<%', '%>');        // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>');   // for escaped data

Also, the view will need to be .blade.php, not .html. This is the standard for all laravel blade (view) files. Documentation here: http://laravel.com/docs/master/blade

answered Oct 29, 2015 at 17:50

Mikel Bitson

3,6471 gold badge20 silver badges23 bronze badges

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

4 Comments

level0 Over a year ago

I tried your trick but the output is still the same that is "{{4+4}}.

Mikel Bitson Over a year ago

Would you be willing to provide a web link to the page? I could probably debug it pretty quickly if I could read the JS console and see the code.

level0 Over a year ago

Hi @Mikel Bitson I solved the issue by reordering the <script> tags . I had placed the angular.js at the end after the custom js files . I reordered it and placed it at the beginning.

Mikel Bitson Over a year ago

@Adil That's great! Glad you've got the solution. I'd take heed and still change one or the other's syntax, they will conflict going forward.

level0 · Accepted Answer · 2015-10-30 13:53:46Z

0

The issue was solved by reordering the script tags. the Angular script tag should be placed at the beginning and then the self written javascript files should be included.

answered Oct 30, 2015 at 13:53

level0

3431 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to use AngularJS in .php file while rendering a laravel view

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related