Laravel Blade模板与AngularJS配合

问题：Laravel与Angular标签冲突

 

Laravel的Blade模板引擎与Angular均使用“{{}}”标签来表示变量。

 

 

解决方法

 

方法1：修改Angular的标签

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

现在，Laravel使用{{variable}}，Angular使用<%variable%>，冲突解决。

 

方法2：修改Laravel模板标签 

Blade::setContentTags('<%', '%>');        // for variables and all things Blade
Blade::setEscapedContentTags('<%%', '%%>');   // for escaped data

现在，变量使用<%$variable%>，注释使用<%--$variable--%>，转义内容使用<%%$variable%%>。

 

方法3：在Laravel的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>

通过@include引入angular模板，与laravel的blade隔离开，解决冲突。

 

方法4：完全抛弃Blade

 直接移除Blade，让Angular来处理模块和路由，达到前后端分离。Angular向Laravel请求JSON数据，处理后展示给用户。

以下是Laravel路由：

// app/routes.php

Route::get('/', function() {
    return View::make('index'); // app/views/index.php
});

在index.php文件中，我们可以自由地用controllers, services, 和 routing等来创建Angular应用。

  

总结

尽管以上方法允许Laravel Blade和AngularJS在同一个文件中共存，但是我们应该尽量把两者分隔开，因此比较推荐方法4。

 

原文链接：https://scotch.io/quick-tips/quick-tip-using-laravel-blade-with-angularjs

 

posted @ 2015-11-23 14:52  HeiYe168  阅读(716)  评论(0)    收藏  举报