Question

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

SF2为我提供了一个很好的方法来构建一个漂亮的REST应用程序，使用doctrine管理我的数据库，使用twig进行模板等等，但我想使用Angularjs。

我知道angularjs SF2是两个不同的框架，有不同的方法，但我想知道这项工作的最佳方法是什么。

它甚至值得吗？

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

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

Answer 1

我认为Symfony2可以与AngularJS完美配合。证据是我使用Symfony在一侧创建API，在另一侧使用AnglularJS创建一个Web应用程序。

此外，由于某些原因，我使用Twig在我的网络应用中生成了我的观点。每次我需要在视图中使用Angular时，我只需在角色{% verbatim %} {% endverbatim %}语句中嵌入angular的花括号。

Answer 2

从Twig 1.12开始，原始标记被重命名为verbatim：

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

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

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

Answer 3

我面临同样的情况，在我的情况下，我决定拆分客户端和服务器项目，我使用symfony2作为服务器端，因为除了带给我的其他优点之外，它还具有简单性和可用性。另一方面，我使用AngularJS创建了一个简单的HTML项目，这对我很有用，因为我想创建一个具有相同客户端文件的HTML5移动应用程序。

在这种情况下，我认为问题的核心在于身份验证和授权过程。您必须在服务器端实现安全防火墙以在REST中工作（例如WSSE：Symfony2: How to create a custom Authentication Provider）。

然后在客户端（AngularJS）中相应的实现，这是我找到的最有用的资源： Github:witoldsz/angular-http-auth

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

Answer 4

我使用以下代码更改了AngularJS delmiters

CoffeeScript的：

# 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>

我认为这样可以保持清洁，并且可以轻松混合树枝和角标签。这似乎对我有用。

Answer 5

避免混淆的两个必须的好方法是基于属性的指令ng-bind：<p ng-bind="yourText"></p>与<p>{{yourText}}</p>

相同

Answer 6

更可取的是保持角度应用分离。只需使用Symfony作为数据检索/持久性的api和安全提供程序。

这样可以更好地分离视图和数据层。因此，您可以在不考虑后端实现的情况下开始在前端工作。你只需要模拟api调用。

Answer 7

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

只要它有一个可以与之交谈的API，AngularJs本身就不需要Symfony2框架来构建应用程序。但是，我发现Symfony2在这些领域很有用：

模板中的翻译。在大多数情况下，API有效负载中的数据不需要转换。使用Symfony I18N支持模板非常有意义。
加载选项列表。假设您有一个包含200多个选项的国家/地区列表。您可以构建一个API来填充angularjs中的动态下拉列表，但由于这些选项是静态的，您只需在树枝中构建该列表。
预加载数据/内容。如果您愿意，可以在托管页面中预加载模板或JSON数据
利用Symfony的身份验证功能。您也可以使用与应用程序的API相同的经过身份验证的会话。无需使用Oauth。
Assetic包非常有用，可以简化和缩小AngularJs使用的一串Javascript文件

然而，我确实发现了以下挑战：

多个Ajax调用的PHP会话锁定。需要一种更好的方法来通过调用'session_write_close（）'或使用数据库进行会话来释放php会话。 Symfony中调用'session_write_close'函数的最佳位置在哪里，以便我们可以尽快释放会话以进行更多ajax调用？
重新加载/同步加载的数据假设您有一个在浏览器中显示的项目列表（如ebay项目），您希望在服务器端更新列表时在客户端的浏览器中更新该列表。您可能需要定期轮询列表或使用Firebase等内容。 Firebase在大多数情况下都是一种矫枉过正，对我而言，民意调查并不好看，但实现这一目标的最佳方法是什么？

请添加评论。感谢

Answer 8

您可以使用此template或者您可以学习此模板，您可以在其中。

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

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

Answer 9

我自己试图让Symfony和AngularJS一起工作时遇到很多问题。然而，在研究它的过程中，我学到了一些可能对你有用的东西：

要将AngularJS表达式SqlCommand sqlComm = new SqlCommand(procName, sqlConn); sqlConn.Open();与树枝花括号分开，您有三种选择：

A）。使用AngularJS表达式{{ variable }}

B）。使用{{ '{{ variable }}' }}

C）。使用AngularJS {% verbatim %} your code {% endverbatim %}服务

interpolateProvider

在js文件中，twig无法为您生成URL。为此，您可以使用“friendsofsymfony / jsrouting-bundle”。安装后，您可以将其用作： angular.module('myApp', []).config(function($interpolateProvider){ $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); });

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

改为使用：

$http.get(Routing.generate('route_name', {'id':id}));

当您想知道请求是否是控制器中的AJAX请求时，我们通常使用isXMLHttpRequest（）方法。问题是Angular不会将其请求标识为XMLHttpRequest请求。使用此：

$http.put(url, $.param({foo: 'bar'}), { headers: {'Content-Type': 'application/x-www-form-urlencoded'} });
创建表单时，您可以选择通过AngularJS显示表单，并让Symfony Form处理请求。为此，您需要禁用CSRF保护：

var app = angular.module('myModule', []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }]);

现在，您的symfony表单可以从自定义Angular请求中接收数据。

除了所有的东西，我仍然不确定一件事，是否使用Symfony或AngularJS显示您的表单。

希望这有帮助。

Answer 10

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

Answer 11

通过网络搜索，我遇到了不同的解决方案。例如，如前所述，您可以更改角度符号。但是，我更喜欢通过简单地告诉twig输出角度符号来保持最简单：

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

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

Answer 12

在模板中使用{@ variable @}。生成模板后，只需将{@替换为{{，将@}替换为}}，并使用简单的str_replace函数。这种方式很干净，比字符串连接快得多。

Answer 13

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

如果你可以分开这两个应用程序，那就完美了！它将创建模型和视图层的良好分离。如果没有，就像我的应用程序一样，你可以肯定地使用AngularJS与Symfony2和TWIG完全没问题。

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

{{ '{{someAngularJsExpression}}' }}

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

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

Answer 14

今天每个人都希望symfony后端有api和angular / vue前端 - 这很好但是这样我们就失去了所有的symfony能力。

我成功地使用了我的symfony应用程序的角度。也许它不是高性能的东西，但它有效。

一些提示：

1

了解$ interpolateProvider

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

这样您可以更改角度中的{{}}以获取其他内容。我正在使用{[{和}]}，所以它不会干扰树枝

2

这里第二好的是 https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

这使用js连接symfony路由，因此所有你在js中的角度视图/或ajax调用都可以由symfony生成 - 这为你提供了巨大的可能性

Answer 15

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

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

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

Hello {{ name }}

您也可以尝试使用左右花括号HTML编码字符集，例如：

&#123; name &#125;

但我不确定它会被AngularJS lib理解：）。

symfony2应用程序上的Angularjs

15 个答案: