symfony2应用程序中的Angularjs

63

我觉得Symfony2可以完美地与AngularJS工作。证明是我使用Symfony在一边制作了一个API，而在另一边使用了AnglularJS制作了一个Web应用程序。

而且，因为某些原因我产生我在我的Twig web应用程序的意见。每次我需要在我的视图中使用Angular时，我只是在角色{% verbatim %} {% endverbatim %}声明中嵌入角度的花括号。

2012-07-13 22:06:13

+9

你也可以改变angularjs的插值标签为您的应用程序 –

+0

@intrepion您是如何做出的指示与Symfony的的FormType领域如工作angularJS 。 CollectionType？我有一个问题http://stackoverflow.com/questions/38389740/customising-symfony2-collectiontype-form-field-display – utkarsh2k2

17

我面临同样的情况，在我的情况，我决定分家客户端和服务器项目，我用Symfony2的服务器端，因为它的简单性和可用性除此之外给我带来其他的优点。另一方面，我用AngularJS创建了一个简单的HTML项目，这对我很有用，因为我想创建一个具有相同客户端文件的HTML5 Mobile App。

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

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

如果你想与您的SF2的项目更深入地执行，则可以使用Assetic的过滤器编译AngularJS，并获得在页面加载性能。

来源

2012-08-20 12:55:59

13

我用下面的代码来改变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>

我想，这使事情变得更清洁，让树枝和角标签容易混合。这似乎对我很好。

来源

2013-04-29 16:41:08 gcman105

27

截至枝条1。12原标签更名为verbatim：

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

一切都在两者之间不会被树枝引擎进行解析，并可以通过AngularJS使用。

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

来源

2013-07-09 10:46:20 acme

11

两个小胡子避免混淆好的解决方案是基于属性的指令称为NG绑定：<p ng-bind="yourText"></p>相同<p>{{yourText}}</p>

来源

2013-09-05 21:05:44 pabloRN

8

我一直在试图建立使用Symfony和单页应用angularjs。我使用Symfony2与FOSRestBundle构建了一个Restful API和Angularjs来构建前端。

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

模板中的翻译。在大多数情况下，API有效内容中的数据不需要翻译。对模板使用Symfony I18N支持非常有意义。
加载选项列表。假设您有一个拥有200多个选项的国家/地区列表。您可以构建一个API来填充angularjs中的动态下拉列表，但由于这些选项是静态的，因此您可以简单地在twig中构建该列表。
预加载数据/内容。如果您喜欢，您可以在托管页面预先加载模板或JSON数据
利用Symfony的身份验证功能。您也可以对应用程序的API使用相同的已验证会话。不需要使用Oauth。
的Assetic束是urglyfy和AngularJs使用Javascript文件缩小束

不过，我也发现下面的挑战是非常有用的：多

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

请加你评论。谢谢

来源

2013-10-01 06:45:00 DavidLin

+2

__对于你的第二个挑战，'websocket'是要走的路.__我想到你已经发布了差不多两年的时间，但是我想评论某人未来的参考。 – Lashae

11

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

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

来源

2013-10-02 16:26:55 ken

+0

^- 这。通过与Twig混合，你正在使自己陷入混乱。如果你的API是正确的，那么只要你认为合适，你就可以挖掘并挖掘UI，而不用关心业务逻辑。因此，测试更容易。 – thinice

-2

你可以简单地躲过大括号，如：

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

，它会被解析到下一个HTML代码：

Hello {{ name }}

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

&#123; name &#125;

但我不确定它会被Angular JS lib :)。

来源

2014-09-12 11:11:18

3

你可以使用这个template或者你可以学习这个模板，你可以基于它。

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

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

来源

2015-02-23 14:00:45

0

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

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

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

来源

2015-10-30 13:12:59

0

使用{@ variable @}模板。生成模板后，将{@替换为{{和@}，用}}替换为简单的str_replace函数。这种方式干净而且快速，然后字符串连接等等。

来源

2015-11-16 12:48:24

2

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

来源

2016-07-07 23:23:29

3

我一直在面对很多问题，我自己试图让Symfony和AngularJS一起工作。但是同时它的工作我学到了一些东西可以帮助你：从枝杈花括号

为了区分AngularJS表达式{{ variable }}你有三个选择：

一）。使用AngularJS表达式的引号{{ '{{ variable }}' }}

b）。将您的AngularJS代码围绕着{% verbatim %} your code {% endverbatim %}

c）。使用AngularJS interpolateProvider服务

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

在js文件，树枝无法为您生成的URL。为此，您可以使用“friendsofsymfony/jsrouting-bundle”。安装完成后，你可以使用它： $http.get(Routing.generate('route_name', {'id':id}));

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

使用这个代替：

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

当你想知道如果请求是控制器内的AJAX请求，我们通常使用的isXMLHttpRequest（）方法。问题在于Angular不会将其请求标识为XMLHttpRequest请求。使用此：

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

在创建表格，你可以选择通过AngularJS显示形式，让Symfony的形式来处理请求。对于您需要禁用CSRF保护：

public function setDefaultOptions(OptionsResolverInterface $resolver) { $resolver->setDefaults(array( 'data_class' => '...', 'csrf_protection' => false )); }

现在的symfony表格可从自定义角请求接收数据。

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

希望这会有所帮助。

来源

2016-07-15 08:12:45 utkarsh2k2

0

我碰到过在Symfony2上使用AngularJS开发单页应用程序的情况。

如果你可以分开两个应用程序，完美！它会创建模型和视图图层的很好分离。如果不是，就像我的应用程序一样，你可以肯定地使用AngularJS和Symfony2以及TWIG。

我用引号将AngularJS这样的表达式 -

{{ '{{someAngularJsExpression}}' }}

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

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

来源

2018-01-24 18:54:59

0

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

我成功使用角度与我的symfony应用程序。也许这不是高性能的东西，但它的工作原理。

一些建议给你：

了解$ interpolateProvider

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

这样你就可以改变{{}}在角别的东西。我使用的是{[{和}]}，所以它不会有树枝干扰

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

此连接的symfony与JS路由，因此所有角度的看法在JS /或Ajax调用可以通过symfony的生成 - 这给你一个巨大的可能性

来源

2018-01-25 09:52:08

symfony2应用程序中的Angularjs

回答

相关问题