如何在 Laravel Blade 中实施 AngularJS 应用程序

Question

我需要实现这个：https://github.com/pshevtsov/flashcards 到我的 Laravel Blade 视图中。我试图在 blade 文件中安装 angular 和 link 所有文件。但它不起作用，因为 laravel 和 angular 在文件中使用 {{ }}。

Answer 1

在 Laravel 5 中，您可以通过执行

告诉 Blade 忽略大括号

@{{ $name }}

Answer 2

您可以设置自定义 AngularJS 花括号以防止与 Blade 模板引擎冲突：

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('%>');
  });

我建议使用 <%= %> 因为它是常用的结构，你可以在 Underscore templates.

中找到它

之后 Angular 代码将如下所示：

<li ng-repeat="phone in phones">
    <p><%= phone.name %></p>
</li>

Answer 3

截至 2016 年 1 月，只需要这样做：

从 Angular 主页下载 app.js。
找到

function $InterpolateProvider() { var startSymbol = '{{'; var endSymbol = '}}';

然后把它们变成任何东西，我想一个非官方的做法是 <% %> function $InterpolateProvider() { var startSymbol = '<%'; var endSymbol = '%>';

功劳应归于 https://scotch.io/quick-tips/quick-tip-using-laravel-blade-with-angularjs

Answer 4

在 blade 模板中，我这样编码：

<div ng-repeat="item in items" class="item" ng-cloak><?='{{item.name}}'?></div>

Answer 5

从 https://www.trioangle.com/blog/how-to-use-angularjs-in-laravel-blade/

复制并粘贴

方法一：更改AngularJS标签

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

现在 Laravel 将使用 {{ variableName }} 而 Angular 将使用 <% variableName %>。就这样，你可以使用 Laravel Blade 和 Angular。您也可以将其更改为您心中想要的任何内容。

方法二：更改Laravel标签

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

变量将是：<% $variable %>。注释将是：<%– $variable –%>。转义数据将如下所示：<%% $variable %%>。您也可以将其更改为您心中想要的任何内容。

方法三：不改变任何标签

@{{ variableName }}

现在 Laravel 将使用 {{ variableName }} 而 Angular 将使用 @{{ variableName }}。

我已经把AngularJS在Laravel Blade中的使用方法都给你解释过了，建议你使用方法3.

Answer 6

Laravel 5.3 版本引入了一个新命令来标记块“原样”，无需解析：

@verbatim
        Hello, {{ name }}.
@endverbatim

如何在 Laravel Blade 中实施 AngularJS 应用程序

How to implement AngularJS app in Laravel Blade

angularjs

laravel

blade