con - symfony 4 angular 5

Angularjs en una aplicación symfony2

Question

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.

Answer 1

A partir de Twig 1.12, la etiqueta en bruto se renombró a verbatim :

{% 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.

Answer 2

Buscando en la web, encontré diferentes soluciones. Puede, por ejemplo, como se dijo antes, cambiar los símbolos angulares. Sin embargo, preferí mantenerlo lo más simple posible simplemente diciendo a twig que emita los símbolos angulares:

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

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

Answer 3

En teoría, solo tendrías renderizada tu página de índice desde Symfony, por lo que no tienes que usar twig para nada. solo necesita renderizar la primera página y luego toma el marco angular. Angularjs tiene su propia sintaxis y capacidades de plantilla. No creo que haya una necesidad de mezclar esos dos, ya que puedes separar completamente ambos frameworks. Tal vez, haz que tu servidor responda con el archivo index.html (tu aplicación angular) en yourdomain.com, y todo de Symfony proviene de / prefijo api, o algo así. Solo imagine que su proyecto WebApi es un proyecto de servidor y angularjs por el otro. solo hablaron a través de llamadas de API, no hay necesidad de mezclar plantillas, en mi opinión.

Answer 4

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.

Answer 5

He estado enfrentando muchos problemas tratando de hacer que Symfony y AngularJS trabajen juntos. Sin embargo, mientras trabajaba en él aprendí algunas cosas que pueden ayudarlo:

1. Para separar las expresiones AngularJS {{ variable }} de las llaves, tiene tres alternativas:

un). Usa las comillas alrededor de las expresiones de AngularJS {{ ''{{ variable }}'' }}

segundo). Rodee su código AngularJS con {% verbatim %} your code {% endverbatim %}

do). Utilice el servicio interpolateProvider AngularJS

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

2. En el archivo js, ​​twig no puede generar la URL por usted. Para esto puedes usar "friendsofsymfony / jsrouting-bundle". Después de instalarlo, puede usarlo como: $http.get(Routing.generate(''route_name'', {''id'':id}));

Puede que esto no funcione para usted, ¿por qué? Una cosa que debe saber sobre $ http.post es que no envía los datos como "Datos de formulario" sino como "Solicitud de carga útil", que es la forma normal de transmitir datos a través de HTTP POST. El problema es que esta "forma normal" no es equivalente a la presentación de un formulario, lo que causa problemas al interpretar datos con el objeto de solicitud de Symfony.

usa esto en su lugar:

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

3. Cuando desee saber si una solicitud es una solicitud AJAX dentro del controlador, generalmente usamos el método isXMLHttpRequest (). El problema es que Angular no identifica sus solicitudes como solicitudes XMLHttpRequest. Utilizar esta:

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

4. Al crear formularios, puede optar por mostrar el formulario a través de AngularJS y dejar que Symfony Form maneje la solicitud. Para eso, necesita desactivar la protección CSRF:

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

Ahora su formulario de Symfony puede recibir datos de una solicitud angular personalizada.

Dejando a un lado todas las cosas, todavía no estoy seguro de una cosa, ya sea para mostrar su formulario usando Symfony o AngularJS .

Espero que esto ayude.

Answer 6

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

Answer 7

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í.

Answer 8

Hoy todo el mundo quiere Symfony backend con api y frontend angular / vue, es bueno, pero de esta manera estamos perdiendo toda la capacidad Symfony en la delantera.

Estoy usando con éxito angular con mis aplicaciones Symfony. Tal vez no sea algo de alto rendimiento, pero funciona.

Algunos consejos para ti:

1

leer sobre $ interpolateProvider

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

De esta manera puedes cambiar {{}} en angular por otra cosa. Estoy usando {[{y}]}, por lo que no interferirá con la ramita

2

Lo segundo mejor aquí es https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

Esto conecta el enrutamiento de symfony con js, por lo que todas sus vistas angulares / o llamadas ajax en js pueden ser generadas por Symfony, esto le brinda enormes posibilidades

Answer 9

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.

Answer 10

Me encontré con la misma situación en la que tuve que desarrollar una aplicación de una sola página usando AngularJS encima de Symfony2.

Si puedes separar las dos aplicaciones, ¡perfecto! Crearía una gran separación de la capa Modelo y Vista. Si no, como fue el caso con mi aplicación, seguramente puede usar AngularJS con Symfony2 y TWIG perfectamente bien.

Usé citas alrededor de las expresiones de AngularJS como -

{{ ''{{someAngularJsExpression}}'' }}

Solo toma un tiempo acostumbrarse, pero cuando lo haces, no enfrentarás muchos problemas. Symfony también te permite usar otros motores de plantillas, pero preferiría no hacerlo.

Así que mi consejo es tener dos aplicaciones diferentes para AngularJS y Symfony. Si no tiene los recursos para hacerlo, puede hacer lo que hice. No te preocupes, te acostumbrarás.

Answer 11

Puede usar esta template o puede estudiar esta plantilla y puede basar 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 project que debe verificar es Aisel es un CMS de código abierto para proyectos de alta carga basados ​​en Symfony2 y AngularJS

Answer 12

Simplemente puede escapar de llaves como:

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

y se analizará en el siguiente código HTML:

Hello {{ name }}

También puede intentar utilizar conjuntos de caracteres codificados en HTML, izquierdo y derecho, por ejemplo:

{ name }

Pero no estoy seguro de que será entendido por AngularJS lib :).

Answer 13

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>

Answer 14

Usa {@ variable @} en plantillas. Después de la plantilla generada simplemente reemplace {@ con {{ y @} con }} con la función simple str_replace . De esta manera es limpio y mucho más rápido que la concatenación de cuerdas y demás.

Answer 15

Creo que 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 puntos de vista en mi aplicación web con Twig . Simplemente incrusto las llaves de angular en una ramita {% verbatim %} {% endverbatim %} declaración cada vez que necesito usar Angular en mis vistas.