Pregunta Angularjs en una aplicación symfony2


Estoy trabajando en una aplicación de SF2 que usa una gran cantidad de javascript en el front-end.

SF2 me proporciona una buena forma de construir una buena aplicación REST, administrar mi base de datos con doctrina, usar twig para plantillas, etc., pero me gustaría usar Angularjs.

Sé que angularjs y SF2 son dos marcos diferentes con enfoques diferentes, pero me pregunto cuál es la mejor manera de hacer que esto funcione.

¿Vale la pena?

En caso afirmativo, ¿cuál cree que es la solución más limpia y eficiente?

Tal vez use php en lugar de twig para plantillas para usar llaves angulares angulars.


74
2018-05-31 13:14


origen


Respuestas:


creo Symfony2 puede funcionar perfectamente con AngularJS. La prueba es que estoy haciendo una API en un lado usando Symfony, y una aplicación web en el otro lado con AnglularJS.

Además, por alguna razón, genero mis vistas en mi aplicación web con Twig. Simplemente incrusté las llaves de angular en una ramita {% verbatim %} {% endverbatim %} declaración cada vez que necesito usar Angular en mis puntos de vista.


64
2017-07-13 22:06



A partir de Twig 1.12, la etiqueta en bruto fue renombrada a literal:

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

Todo lo que esté en medio no será analizado por Twig Engine y AngularJS lo puede usar.

Aunque recomendaría cambiar los delimitadores AngularJS. De lo contrario, puede ser difícil distinguir entre Twig y el código AngularJS cuando mira sus plantillas.


27
2017-07-09 10:46



Enfrentarme a la misma situación, en mi caso, decidí dividir los proyectos de cliente y servidor, utilicé Symfony2 como servidor porque su simplicidad y facilidad de uso, además de otras ventajas, son importantes para mí. Por otro lado, creé un proyecto HTML simple con AngularJS, que es útil para mí porque quiero crear una aplicación móvil HTML5 con los mismos archivos de cliente.

En ese caso, creo que el núcleo del problema aquí está en el proceso de autenticación y autorización. Debe implementar un firewall seguro para trabajar en REST (por ejemplo, WSSE: Symfony2: cómo crear un proveedor de autenticación personalizado) en el lado del servidor.

Y luego la implementación correspondiente en el lado del cliente (AngularJS), el recurso más útil que encontré: Github: witoldsz / angular-http-auth.

Si desea una implementación más profunda con su proyecto sf2, puede compilar AngularJS utilizando los filtros de Assetic y obtener rendimiento en la carga de la página.


17
2017-08-20 12:55



He usado el siguiente código para cambiar los eliminadores de AngularJS

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;

o Javascript:

var WAFapp2;

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

luego en la parte superior de mis diseños:

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

luego, en la sección de etiqueta del cuerpo del html, puedo usar:

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

Creo que esto mantiene las cosas más limpias, y permite una fácil mezcla de ramitas y etiquetas angulares. Esto parece funcionar bien para mí.


13
2018-04-29 16:41



Una buena solución para los dos bigotes para evitar la confusión es la directiva basada en atributos llamada ng-bind: <p ng-bind="yourText"></p> es lo mismo que <p>{{yourText}}</p> 


11
2017-09-05 21:05



Mantener la aplicación angular separada es más recomendable. Simplemente use Symfony como una API para recuperación de datos / persistencia y como proveedor de seguridad.

Esto permitiría una mayor separación de la vista y la capa de datos. Como resultado, puede comenzar a trabajar desde el lado de la interfaz sin pensar aún en la implementación de back-end. Solo necesita burlarse de las llamadas de API.


11
2017-10-02 16:26



He intentado crear una aplicación de una sola página usando Symfony y angularjs. Usé Symfony2 con FOSRestBundle para construir una Restful API y Angularjs para construir la interfaz.

Por sí mismo, AngularJs no necesita el framework Symfony2 para construir una aplicación, siempre que tenga una API para hablar. Sin embargo, encontré Symfony2 útil en estas áreas:

  1. Traducción en la plantilla. los datos en la carga útil API no necesitan traducción en la mayoría de los casos. Usar el soporte de Symfony I18N para la plantilla tiene mucho sentido.

  2. Carga de listas de opciones. Supongamos que tiene una lista de países con más de 200 opciones. Puedes construir una API para poblar un menú desplegable dinámico en angularjs, pero como estas opciones son estáticas, puedes simplemente construir esa lista en ramitas.

  3. Precarga de datos / contenido. Puede precargar plantilla o datos JSON en la página de alojamiento si lo desea

  4. Aproveche la función de autenticación de Symfony. También puede usar la misma sesión autenticada para la API para la aplicación. No es necesario usar Oauth.

  5. El paquete Assetic es muy útil para urglyfy y minimizar racimos de archivos Javascript utilizados por AngularJs

Sin embargo, encontré los siguientes desafíos:

  1. Bloqueo de sesiones PHP para múltiples llamadas Ajax. Se necesita una forma mejor de liberar la sesión php llamando a 'session_write_close ()' o usar una base de datos para la sesión. ¿Dónde está el mejor lugar en Symfony para llamar a esa función 'session_write_close' para que podamos liberar la sesión para más llamadas ajax tan pronto como sea posible?

  2. Recargar / Sincronizar datos cargados Supongamos que tiene una lista de elementos (como artículos de eBay) que se muestran en un navegador, desea actualizar esa lista en el navegador del cliente cuando la lista se actualizó en el servidor. Es posible que necesite sondear la lista periódicamente o usar algo como Firebase. Firebase es una exageración en la mayoría de los casos, las encuestas no me resultan agradables, pero ¿cuál es la mejor manera de lograrlo?

Por favor agrega tus comentarios. Gracias


8
2017-10-01 06:45



Puedes usar esto modelo o puedes estudiar esta plantilla y puedes basarla en ella.

Es una aplicación de plantilla con comunicación segura a través de una API de RestFul entre la parte del cliente con AngularJS y la parte del servidor con Symfony2.

Otro proyecto que debes comprobar es que Aisel es un CMS de código abierto para proyectos de alta carga basados ​​en Symfony2 y AngularJS


3
2018-02-23 14:00