在 Laravel Blade 中使用 AngularJS
10

说明

Laravel 的 Blade 模版引擎和 AngularJS 的模版引擎使用同样的变量显示方法如下:

{{ variableName }}

解决方法

下面几种解决方法:

  1. 修改 Laravel Blade 的变量解析方式;
  2. 修改 AngularJS 的变量解析方式;
  3. 在 Blade 里使用 @{{ variableName }} , 跳过 Blade 的变量解析;
  4. 在 Blade 模版里面使用 include 去包含 Angular 模版 (推荐这种方法);
  5. 完全不使用 Blade.

1. 修改 Laravel Blade 的变量解析方式

使用以下方法修改:

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

上面的修改会影响 Blade 模版引擎的行为:

  • 变量使用输出 - <% $variable %>
  • 注释 <%-- $variable --%>
  • 需要转义的变量数据 <%% $variable %%>

代码可以放到 routes.php 文件里面.

2. 修改 AngularJS 的变量解析方式

在初始化 Module 的时候, 调用 $interpolateProvider 进行设置:

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

上面的代码会让 AngularJS 使用 <% variableName %> 这种方法去解析变量.

3. 在 Blade 里使用 @{{ variableName }} , 跳过 Blade 的变量解析

在写变量的时候, 可以使用在前面加 @ 的方法跳过解析:

@{{ variableName }} 

上面的代码你如果写在 Blade 模版里面的话, 应用输出 HTML 会是:

{{ variableName }}

4. 在 Blade 模版里面使用 include 去包含 Angular 模版 (推荐这种方法)

如以下代码, 是在文件 app/views/index.blade.php Blade 模版里面, 注意看 @include 的使用:

<!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-stuff') 会加载 app/views/angular-stuff.php 文件.

推荐使用此方法, 原因是能够让代码更加模块化, 并且能同时兼并 Laravel Blade 和 Angular 的好处.

5. 完全不使用 Blade.

完全的把 Laravel App 作为 API 服务器, 前端和后端分离.

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

Practice makes perfect.

本帖已被设为精华帖!
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 10
Summer

@lifesign AngularJS is amazing.

3年前
Summer

@JobsLong What? 你是说这个词应该分开吗?

3年前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!