Symfony2 和使用像 AngularJS 这样的框架的单个网页应用程序 [英] Symfony2 And Single Webpage Applications using a framework like AngularJS

问题描述

(如果这不是发布此类问题的合适地方，我很乐意将其发布到其他地方)

我正在尝试构建一个交互式 Web 应用程序来管理公司资源.我有使用 Symfony2 的经验，但我在使用这个新应用程序时遇到了障碍.

I'm trying to build an interactive web application to manage company resources. I have experience with Symfony2 but I kind of hit a wall with this new application.

我想让这个应用程序在客户端具有很强的交互性.几乎是一个完整的单一网页应用程序.我以前的 Web 应用程序通常只使用带有 CRUD 页面的典型 MVC 模式.

I'd like to make this application quite interactive on the client side. Almost a full single webpage application. My previous web applications would normally just use a typical MVC pattern with CRUD pages.

在那些简单的应用程序中，我会

/employees/
/employees/create
/employees/detail/45
/employees/update/45
/employees/delete/45

在这种应用程序中使用 symfony 会给我带来很多好处:

Using symfony in this kind of application would give me a lot of advantages:

• 路由
• 安全性(CSRF 令牌)
• FormTypes 和表单处理
• 验证
• 与 Doctrine 的整合
• 树枝

特别是像 Twig 这样的功能非常令人耳目一新(因为我的模型是作为 Doctrine 实体构建的):

Especially functionality like this in Twig was very refreshing (since my models were build as Doctrine entities):

<p>{{ employee.getCurrentTask().description }}</p>

我现在面临的问题是我觉得 Symfony2 并不是真正为单个网页应用程序构建的.一旦我尝试添加一些 Ajax 功能，我就会遇到这些问题:

The problem I'm facing now is that I feel like Symfony2 isn't really build for single webpage applications. As soon as I try to add some Ajax functionality I'm faced with these problems:

• CSRF 令牌无效
• jQuery 中有太多不可重用的视图/表示逻辑
• 在 html 中添加数据属性以获取 ID 等...

然后我研究了 Knockout.js 和 Angularjs，但后来我觉得失去了 Doctrine 和 Twig 的所有优点.无论如何，我必须在客户端重建我的模型，然后必须在两个不同的位置维护它们.

I then looked into Knockout.js and Angularjs but then I feel like lose all of the advantages of Doctrine and Twig. I have to rebuild my models on the client side anyway and have to maintain them in two different locations then.

所以我想出了这个主意:

So I came up with this idea:

• 使用 Symfony2 模型和控制器将数据持久化到数据库，但让 symfony 中的控制器只发送 JSON 并接收 JSON(可能是 FOSRestBundle?)
• 使用 AngularJS 或 KnockoutJS 等框架在客户端重建 JSON 数据以使用 2 向绑定.

但是我如何解决像 Doctrine2 关系、表单验证、CSRF 等 Symfony 已经解决但如果我使用前端 js 框架无法使用的问题?

欢迎所有建议！

推荐答案

关于 JSON、序列化和模型的一些话

西蒙，我遇到了完全相同的问题.首先像ken已经提到过.您不需要重建任何模型.最好使用 FosRestBundle 和/或 JMS Serializer.它将具有关系的实体转换为 JSON 对象.这些对象通过 api 传输到您的前端，当您像这样使用 angular.js 时，您可以像在树枝中一样使用它们

Simon, I faced exactly the same questions and problems. First like ken already mentioned. You don't need to rebuild any model. Better use FosRestBundle and/or JMS Serializer. It turns you entities with relations into JSON objects. This objects are transferred via api to your frontend and you can work with them just like in twig, when you use angular.js like this

{[{ user.username }]}

和树枝一样.但请记住，您必须为 angular 设置自定义括号，因为默认情况下它使用与 twig 相同的内容.

is as same as in twig. But remember that you have to set custom brackets for angular because by default it uses the same as twig.

路由

您说的是单页应用程序，因此 symfony 的路由保持在低级别以减少页面刷新.相反，您必须使用前端框架的路由，因为我只熟悉 angular.js，我举了一个 angular 示例:

You talk of a single page application, so symfony's routing is kept on a low level to have few page refresh. Instead you have to use routing of your frontend framework, because I am only familiar with angular.js, I give an angular example:

app.config(function($routeProvider, $interpolateProvider) {

    //here you go, custom brackets
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');

    $routeProvider.when('/user', {
        controller: UserController, 
        templateUrl: Routing.generate('suser_list')
    }).when('/ticket', {
        controller: TicketController, 
        templateUrl: Routing.generate('ticket_list')
    });
});

当你点击一个链接时

<a href="#/ticket">Go to tickets</a>

AngularJs 会知道要触发哪个前端控制器.非常棒的东西，无需重新加载页面.另请查看 FosJSRoutingBundle.它允许您在 javascript 中生成 symfony 路由，我使用它们将 js 控制器与 html 模板链接起来，其中数据被推入.

AngularJs will know which frontend controller to trigger. Pretty great stuff, without page reload. Also have a look at FosJSRoutingBundle. It allows you to generate symfony routes in javascript, I use them to link js controllers with html templates where data is pushed in.

表单类型、表单处理、验证

好吧，当您使用像 angularjs 这样的前端框架时，您的 symfony 表单类型非常无用.但我不确定.请记住，数据是通过 api 作为 json 推送和拉取的，我认为对于表单类型来说，处理这种复杂性将是一项艰巨的工作.

Well, when you use a frontend framework like angularjs, your symfony form types are pretty useless. But I am not sure. Remember data is pushed and pulled via api as json, I think this would be a hard job for form types to handle this kind of compexity.

对于验证，您可以使用 angular 的实时验证或在后端使用 symfony 的验证，没问题.同时使用客户端和服务器端验证可能是一件好事.

For validation you can use angular's live validation or have you symfony's validation in the backend, no problem. It might be a good thing to use both, client and server side validation.

树枝

Twig 出局了.所有数据都在客户端呈现，而不是像 Twig 那样在服务器端预呈现.但只有当您的应用程序确实是一个单页面应用程序时才会出现这种情况.当然你可以使用twig，但它只会在你重新加载整个页面时刷新.

Twig is out of the race. All data is rendered on the client side, and not pre rendered on server side like with twig. But that is only the case if your application is really a single page application. Of course you can use twig, but it will only refresh if you reload the entire page.

与教义的整合

您仍然可以在后端使用学说.您有关于教义和 SPA 的具体问题吗?

You can still use doctrine in the backend. Do you have a specific question regarding doctrine and SPA?

这篇关于Symfony2 和使用像 AngularJS 这样的框架的单个网页应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！