Laravel的Blade模板引擎与Angular均使用“{{}}”标签来表示变量。
解决办法有几个:
方法1：修改Angular的标签
var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
现在，Laravel使用{{variable}}，Angular使用<%variable%>，冲突解决。
方法2：修改Laravel模板标签 (适用于laravel version <5.3)
public function boot()
{
\Blade::setRawTags("[[", "]]");
\Blade::setContentTags('<%', '%>'); // for variables and all things Blade
\Blade::setEscapedContentTags('<%%', '%%>'); // for escaped data
}
源文件位置:
D:\phpStudy\WWW\xxx\vendor\laravel\framework\src\Illuminate\View\Compilers\BladeCompiler.php
全局修改的话就加到route.php里面就可以了.但是我始终认为这个应该变成一个配置项.
现在，blade变量使用<%$variable%>，注释使用<%–$variable–%>，转义内容使用<%%$variable%%>。
3.在{{前面加个@符号,这样的话blade就不会解析,留给angular解析乐了
<div>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello, @{{ yourName }}!</h1>
</div>
4.如果Laravel >= 5.3
如果大量的全是js代码,可以使用verbatim标签就可以了.
@verbatim
<div>
{{ ctl.variable1 }}
{{ ctl.variable2 }}
</div>
@endverbatim
5.在blade页面引用一个非blade得php文件(不推荐)
<!-- index.blade.php -->
<!doctype html>
<html>
<head>
<title>Fancy Laravel and Angular</title>
<!-- load angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
</head>
<body>
@include('angular-stuff'); <!-- app/views/angular-stuff.php -->
</body>
</html>
方法6：完全抛弃Blade,完全前后端分离.
直接移除Blade，让Angular来处理模块和路由，达到前后端分离。Angular向Laravel请求JSON数据，处理后展示给用户。
我比较倾向于前四种方法.
参考:
https://stackoverflow.com/questions/28548694/using-laravel-5-with-angularjs-blade-tag-conflict
https://laravel.com/docs/5.5/blade#blade-and-javascript-frameworks
https://github.com/laravel/framework/issues/17640
ES6
