angularjs – 将Angular.js与Symfony 2一起使用

AngularJS确实希望控制您的浏览器并充当单页面应用程序.它希望服务器被动地提供模板,图像等.它希望通过json传输数据块.

S2视图组件真的想通过twig生成它自己的html.它基于一个愚蠢的浏览器,只能呈现发送的内容(完整的HTML页面).

Twig与AngularJS模板不兼容,特别是因为它们都使用大括号.

S2形式的html生成器增加了额外的复杂层,因为它想要控制输入元素命名以允许将发布的数据映射回对象. AngularJS想要使用它自己的表单元素和json.

我让每个人做它最擅长的事情.我只有一个S2 twig模板,它是应用程序的主要入口点.该模板提供了获得AngularJS所需的javascripts.

然后我让AngularJS以AngularJS想要看到它们的方式请求部分模板格式化. S2不处理部分并且从不看到它们.

S2用于实现类似web api的REST.它获取数据并将其作为json提供. JMSSerializer软件包在这里派上用场. AngularJS控制器负责处理浏览器端的数据并将其映射到AngularJS表单.

这个难题的缺失部分是使用S2表单组件进行验证.目前,我根本不使用表单组件.序列化程序帮助我将json数据映射到我的对象(替换$form-> handleRequest功能),然后直接调用验证器(替换formIsValid).

虽然我有时会错过表单组件,但它工作得相当好.能够轻松地重用表单类型是很好的.

我真的希望S2表单组件能够直接处理json.它可能是可以做的.只需要深入挖掘它.

===============================================

以下是映射到AngularJS模型的AngularJS表单的示例

<form name="form" novalidate class="simple-form css-form">
ID: {{ person.id }}<br />

Full Name:  <input type="text"  ng-model="person.name_full"  name="person_name_full" required /><br />
<div ng-show="form.person_name_full.$dirty && form.person_name_full.$invalid">Invalid:
    <span ng-show="form.person_name_full.$error.required">Full Name is required.</span>
</div>

First Name: <input type="text"  ng-model="person.name_first" /><br />
Last Name:  <input type="text"  ng-model="person.name_last"  /><br />

Email: <input type="email" ng-model="person.email" name="person_email" required /><br />
<div ng-show="form.person_email.$dirty && form.person_email.$invalid">Invalid:
    <span ng-show="form.person_email.$error.required">Email is required.</span>
    <span ng-show="form.person_email.$error.email">This is not a valid email.</span>
</div>

使用twig生成它的最大挑战是元素名称属性.哑巴html表单不能嵌套,并要求每个名称都是唯一的.这,S2实现了它自己相当冗长的命名约定,它部分地基于元素顺序,因此难以预测.

AngularJS需要名称来处理客户端验证,这反过来可以使您的应用程序更具响应性并使用更少的带宽.

S2需要名称来进行服务器端验证.这是一个基本的冲突.

AngularJS支持嵌套表单和嵌套的json数据.所以我们可以简单地保持名称.

这就是为什么我不认为当前的S2表单组件与AngularJS很好地配合.为什么拥有支持AngularJS的S2表单组件会很棒.