在 symfony2应用程序中使用 Angularjs

我正在开发一个 SF2应用程序，它在前端使用了大量的 javascript。

SF2为我提供了一个很好的方法来构建一个不错的 REST 应用程序，用原则管理我的数据库，使用 twig 作为模板等等，但是我想使用 Angularjs。

我知道 angularjs 和 SF2是两种不同的框架，采用不同的方法，但我想知道最好的方法是什么。

值得吗？

如果是，你认为什么是最清洁和最有效的解决方案？

也许使用 php 而不是 twig 作为模板来使用 angularjs 花括号？

45760 次浏览
小开

我认为 Symfony2可以很好地与 AngularJS工作。证据就是我一边用 Symfony 制作了一个 API，另一边用 AngularJS 制作了一个 web 应用。

此外，由于某些原因，我在我的网络应用程序与 Twig生成我的意见。每次我需要在视图中使用 Angular 的时候，我只是简单地在一个小枝 {% verbatim %} {% endverbatim %}语句中嵌入了棱角的花括号。

小开

我也面临同样的情况，在我的案例中，我决定将客户端和服务器项目分开，我使用 symfony2作为服务器端，因为它简单易用，除了给我带来的其他优势之外。 另一方面，我用 AngularJS 创建了一个简单的 HTML 项目，这对我很有用，因为我想用相同的客户端文件创建一个 HTML5移动应用程序。

在这种情况下，我认为问题的核心在于身份验证和授权过程。必须在服务器端实现一个用于 REST (例如 WSSE: Symfony2: 如何创建自定义身份验证提供程序)的安全防火墙。

然后是客户端的相应实现(AngularJS) ，这是我发现的最有用的资源: Github: witoldsz/angle-http-auth .

如果您希望对 sf2项目进行更深入的实现，可以使用 Assetic 的过滤器编译 AngularJS，并获得页面加载性能。

小开

我使用了以下代码来更改 AngularJS 分隔符

咖啡记录:

# Change the angular delimiters for twig compatability
# and load module with ngResource
WAFapp2 = angular.module("WAFapp2", ['ngResource'], ($interpolateProvider) ->
$interpolateProvider.startSymbol "{[{"
$interpolateProvider.endSymbol "}]}"
)    var WAFapp2;

或 Javascript:

var WAFapp2;


WAFapp2 = angular.module("WAFapp2", ['ngResource'], function($interpolateProvider) {
$interpolateProvider.startSymbol("{[{");
return $interpolateProvider.endSymbol("}]}");
});

然后在我的布局的顶部:

<!DOCTYPE html>
<html lang="en" data-ng-app="WAFapp2">
<head>

然后在 html 的 body 标记部分我可以使用:

<ul>
{% for item in seq %}
<li>{[{ item }]}</li>
{% endfor %}
</ul>

我认为这使事情更干净，并允许轻松混合树枝和角标签。这看起来对我很有效。

小开

从 Twig 1.12开始，原始标签被重命名为 一字不差:

{% verbatim %}
<ul>
{% for item in seq %}
<li>\{\{ item }}</li>
{% endfor %}
</ul>
{% endverbatim %}

中间的所有内容都不会被 Twig 引擎解析，可以被 AngularJS 使用。

虽然我建议更改 AngularJS 分隔符。否则，在查看模板时，很难区分 Twig 和 AngularJS 代码。

小开

对于这两个八字胡来说，避免混淆的一个很好的解决方案是基于属性的指令 ng-bind: <p ng-bind="yourText"></p>与 <p>\{\{yourText}}</p>相同

小开

我一直在尝试用 Symfony 和 angularjs 构建一个单页面应用程序。我使用 Symfony2和 FOSRestBundle 来构建 Restful API，使用 Angularjs 来构建前端。

AngularJs 本身并不需要 Symfony2框架来构建应用程序，只要它有一个可以使用的 API。然而，我发现 Symfony2在这些方面很有用:

  1. 模板中的翻译。 在大多数情况下，API 有效负载中的数据不需要转换。对模板使用 Symfony I18N 支持非常有意义。

  2. 加载选项列表。 假设您有一个包含200多个选项的国家列表。您可以构建一个 API 来填充 angularjs 中的动态下拉列表，但是由于这些选项是静态的，所以您可以简单地在 twig 中构建该列表。

  3. 预载数据/内容。 如果您喜欢

    4. ，可以在宿主页面中预加载模板或 JSON 数据

  4. 利用 Symfony 的认证功能。 你也可以对应用程序的 API 使用相同的认证会话，不需要使用 Oauth

  5. Assetic bundle 在对 AngularJs 使用的 Javascript 文件进行 urglyfy 或者缩小时非常有用

不过，我确实发现了以下挑战:

  1. 用于多个 Ajax 调用的 PHP 会话锁定。 需要通过调用‘ session _ write _ close ()’或使用会话数据库来释放 php 会话的更好方法。在 Symfony，哪里是调用“ session _ write _ close”函数的最佳地点，这样我们就可以尽快释放会话以进行更多 ajax 调用？

  2. 重新加载/同步已加载的数据 假设您有一个在浏览器中显示的项目列表(如 ebay 项目) ，您希望在服务器端更新该列表时在客户端的浏览器中更新该列表。您可能需要定期轮询列表或使用类似 Firebase 的工具。Firebase 在大多数情况下是一种过度杀伤，轮询在我看来并不好，但是实现这一点的最佳方法是什么？

请添加您的意见。谢谢

小开

保持角度应用程序分开是更明智的。只需使用 Symfony 作为数据检索/持久性的 API 和安全提供者。

这将允许视图和数据层更大程度的分离。因此，您可以开始在前端工作，而不用考虑后端实现。你只需要嘲笑 API 的电话。

小开

您可以简单地转义大括号，比如:

Hello \{\{ '\{\{' }} name \{\{ '}}' }}

它将被解析为下一个 HTML 代码:

Hello \{\{ name }}

您还可以尝试使用左右大括号的 HTML 编码字符集，例如:

&#123; name &#125;

但我不确定 AngularJS lib:)会理解它。

小开

你可以使用这个 模板或者你可以研究这个模板，你可以在它的基础上。

是一个模板应用程序，客户端部分与 AngularJS 和服务器部分与 Symfony2之间通过 RestFul API 进行安全通信。

另一个你应该检查的 项目是 Aisel 是基于 Symfony2和 AngularJS 的高负荷项目的开源 CMS

小开

通过网络搜索，我找到了不同的解决方案。你可以，例如前面所说的，改变角度符号。然而，我倾向于尽可能简单地告诉 twig 输出角度符号:

\{\{ '\{\{entity.property}}' }}

Http://louisracicot.com/blog/angularjs-and-symfony2/

小开

在模板中使用 {@ variable @}。模板生成后，用 \{\{代替 {@，用 }}代替 @}，用简单的 str_replace功能。这种方式比字符串连接等方式干净、快得多。

小开

理论上，您只需要使用 symfony 呈现索引页面，所以根本不需要使用 twig。你只需要渲染第一页，然后角度框架接管。Angularjs 有自己的模板语法和功能。我认为没有必要混合使用这两个框架，因为您可以完全分离这两个框架。也许，让您的服务器响应 yourdomain.com 上的 index.html 文件(您的角度应用程序) , Symfony 的所有东西都来自/api 前缀之类的。想象一下，您的 WebApi 项目是一个服务器，而 angularjs 项目在另一个上。在我看来，他们只会通过 api 调用交谈，根本不需要混合模板。

小开

为了让 Symfony 和 AngularJS 合作，我自己也遇到了很多问题。然而，在这个过程中，我学到了一些可能对你有帮助的东西:

  1. 要分离 AngularJS 表达式 \{\{ variable }}和细枝花括号，你有三种选择:

在 AngularJS 表达式 \{\{ '\{\{ variable }}' }}周围使用引号

用 {% verbatim %} your code {% endverbatim %}包围 AngularJS 代码

C)使用 AngularJS interpolateProvider服务

angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
  1. 在 js 文件中，twig 无法为您生成 URL。为此，可以使用“ friends sofsymfony/jsrouting-bundle”。安装后，你可以使用它作为: $http.get(Routing.generate('route_name', {'id':id}));

这可能不适合你的提交，为什么？关于 $HTTP.POST，您应该知道的一件事是，它不以“ Form Data”的形式发送数据，而是以“ Request Payload”的形式发送数据，这是通过 HTTP POST 传输数据的正常方式。问题是这种“正常方式”不等同于表单提交，这会导致使用 Symfony Request 对象解释数据时出现问题。

用这个代替:

$http.put(url, $.param({foo: 'bar'}), {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

  1. 当您想知道一个请求是否是控制器中的 AJAX 请求时，我们通常使用 isXMLHttpRequest ()方法。问题是 Angular 没有将其请求标识为 XMLHttpRequest 请求。用这个:

    Var app = angular.module (‘ myModule’，[]) ; Config ([’$httpProvider’，function ($httpProvider){ $httpProvider.defaults.headers.common [“ X-Request-With”] = ‘ XMLHttpRequest’; }]);

  2. 在创建表单时，您可以选择通过 AngularJS 显示表单，并让 Symfony Form 处理请求。为此，你需要禁用 CSRF 保护:

    公共函数 setDefaultOptions (OptionsResolverInterface $Resolver) { $Resolver-> setDefault (array ( “ data _ class”= > “ ...”, “ csrf _ protected”= > false )); }

现在您的 symfony 表单可以接收来自自定义角度请求的数据。

抛开所有的事情不说，我还是不确定一件事，是否使用 Symfony 或 AngularJS 显示表单。

希望这个能帮上忙。

小开

我遇到过同样的情况，我必须在 Symfony2之上使用 AngularJS 开发一个单页面应用程序。

如果你可以分开这两个应用程序，完美! ! ! 这将创建一个巨大的模型和视图层分离。 如果没有，就像我的应用程序一样，您肯定可以在 Symfony2和 TWIG 中使用 AngularJS。

我在 AngularJS 表达式周围使用了引号，比如-

\{\{ '\{\{someAngularJsExpression}}' }}

它只是需要一些时间来适应它，但当你这样做，你不会面临很多问题。 Symfony 还允许您使用其他模板引擎，但我不希望这样做。

所以我的建议是要么有两个不同的 AngularJS 和 Symfony 应用程序。 如果你没有这样做的资源，你可以做我做的方式。 别担心，你会习惯的。

小开

今天，每个人都希望与 api 和棱角/vue 前端的后端交响乐-这是很好的，但这样我们正在失去所有的前端交响乐的能力。

我成功地在我的交响乐应用程序中使用了棱角。也许这不是高性能的东西，但它的工作原理。

给你一些建议:

1

阅读关于 $interpolateProvider 的内容

angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});

这样就可以把\{\{}}的角度改为其他值。我使用{[ and }]} ，所以它不会干扰到细枝

2

第二好的是 Https://symfony.com/doc/master/bundles/fosjsroutingbundle/index.html

这个用 js 连接 symfony 路由，所以 js 中的所有角度视图/或 ajax 调用都可以通过 symfony 生成——这给了你一个巨大的可能性


提交答案