2012-05-31 21 views
73

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

SF2 me proporciona una buena forma de crear 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 un SF2 son 2 marco diferente con enfoque diferente, pero me pregunto cuál es la mejor manera de hacer este trabajo es.

¿Vale la pena?

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

utilizar php Tal vez en lugar de rama para las plantillas a utilizar AngularJS llaves?

Respuesta

63

creo Symfony2 puede perfectamente trabajar bien 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.

Por otra parte, para algunas razones por las que generan mis puntos de vista en mi aplicación web con Twig. Simplemente incrusté las llaves de angular en una ramita {% verbatim %} {% endverbatim %} cada vez que necesito usar Angular en mis vistas.

+9

También podría cambiar las etiquetas de interpolación de angularjs para su aplicación –

+0

@intrepion ¿Cómo hacer que las directivas AngularJS funcionen con los campos FormType de Symfony, por ejemplo? . ¿CollectionType? Tengo un problema http://stackoverflow.com/questions/38389740/customising-symfony2-collectiontype-form-field-display – utkarsh2k2

17

Enfrentarme a la misma situación, en mi caso, decidí dividir los proyectos de cliente y servidor, utilicé Symfony2 como servidor porque es simple y fácil de usar además de otras ventajas que me brinda. 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: How to create a custom Authentication Provider) en el lado del servidor.

Y entonces la aplicación correspondiente en el lado del cliente (AngularJS), el recurso más útil que he encontrado: Github:witoldsz/angular-http-auth.

Si quieres aplicación más profunda con su proyecto SF2, puede compilar AngularJS el uso de filtros de Assetic, y obtener un rendimiento de carga de la página.

13

He utilizado el código siguiente para cambiar los 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; 

o JavaScript:

var WAFapp2; 

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

continuación, en la parte superior de mis diseños:

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

y más tarde en la sección de cuerpo de la etiqueta del HTML que puede utilizar:

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

Creo que esto hace que las cosas más limpio, y permitir una fácil mezcla de ramas y etiquetas angulares. Esto parece funcionar bien para mí.

27

A partir de Twig 1.12 la etiqueta cruda fue renombrado a verbatim:

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

todo en el medio no será analizado por el motor de la ramita y se puede utilizar por AngularJS.

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

11

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

8

He estado tratando de construir 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. Cargando 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 haz Assetic es muy útil para urglyfy y racimos minify de archivos Javascript utilizados por AngularJS

Sin embargo, encontré los siguientes desafíos:

  1. sesión de PHP bloqueo de múltiples Ajax llama. Necesita una forma mejor de liberar la sesión php llamando a 'session_write_close()' o use 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 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

+2

__Para su segundo desafío, 'websocket' es el camino a seguir .__ Soy consciente de que Han pasado casi dos años desde la publicación, sin embargo, me gustaría comentar la futura referencia de alguien. – Lashae

11

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.

+0

^- Esto. Te estás haciendo un mal servicio mezclando ng con Twig. Si haces tu API correctamente, puedes arrancar y destripar la UI cuando lo consideres conveniente y no preocuparte por la lógica de negocios. Las pruebas son más fáciles como resultado. – thinice

-2

Puede simplemente escapado entre llaves como:

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

y será analizado con el siguiente código HTML:

Hello {{ name }} 

También puede tratar de utilizar llaves izquierda y derecha HTML codificados juego de caracteres, por ejemplo:

&#123; name &#125; 

Pero no estoy seguro de que se entienda por Angular JS lib :).

3

Puede usar este template o puede estudiar esta plantilla y puede basarse en ella.

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

Otra project que usted debe comprobar es Aisel es de código abierto CMS para proyectos Highload basado en Symfony2 y AngularJS

0

buscando a través de la web, me encontré con diferentes soluciones. Puede, por ejemplo, como se dijo antes, cambiar los símbolos angulares. Sin embargo, he preferido mantenerlo lo más simple posible simplemente diciendo ramita para dar salida a los símbolos angulares:

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

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

0

Uso {@ variable @} en las plantillas. Después de generar la plantilla 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.

2

En teoría, solo tendría su página de índice representada desde Symfony, por lo que no tiene que usar twig en absoluto. 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 puede separar completamente ambos frameworks.Tal vez, haga que su servidor responda con el archivo index.html (su aplicación angular) en su dominio.com, y todo lo que Symfony proviene de/api prefix, 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.

3

He estado enfrentando una gran cantidad de problemas tratando de hacer que Symfony y AngularJS trabajen juntos. Sin embargo, mientras trabajaba en él he aprendido algunas cosas que pueden ayudarle a:

  1. para separar las expresiones AngularJS {{ variable }} de la ramita llaves tiene tres alternativas:

a).Utilice las comillas alrededor de las expresiones AngularJS {{ '{{ variable }}' }}

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

c). Use AngularJS interpolateProvider servicio

angular.module('myApp', []).config(function($interpolateProvider){ 
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); 
}); 
  1. En el archivo js, ​​ramita no puede generar la URL para usted. Para esto puedes usar "friendsofsymfony/jsrouting-bundle". Después de instalarlo se puede usar como: $http.get(Routing.generate('route_name', {'id':id}));

Esto no puede trabajar para usted para su presentación, ¿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.

uso de esta forma:

$http.put(url, $.param({foo: 'bar'}), { 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
}); 
  1. Cuando se desea saber si la petición es una petición AJAX dentro del controlador, que suelen utilizar el método isXmlHttpRequest(). El problema es que Angular no identifica sus solicitudes como solicitudes XMLHttpRequest. Utilice:

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

  2. bien la creación de formas se puede elegir para mostrar el formulario a través AngularJS y dejar formularios de Symfony para manejar la petición. Para que usted necesita para 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 petición de encargo angular.

Todas las cosas a un lado, todavía no estoy seguro de una cosa, si mostrar su formulario con Symfony o AngularJS.

Espero que esto ayude.

0

Me he encontrado 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 puede separar las dos aplicaciones, ¡perfecto! Crearía una gran separación de la capa Modelo y Vista. Si no es así, como fue el caso con mi aplicación, seguramente puede usar AngularJS con Symfony2 y TWIG perfectamente bien.

que utilizan comillas alrededor de las expresiones como AngularJS -

{{ '{{someAngularJsExpression}}' }} 

Solo se necesita un poco de tiempo para acostumbrarse a ella, pero cuando lo hace, usted no va a hacer frente a muchos problemas. Symfony también le 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 se preocupe, se acostumbrará.

0

Hoy todo el mundo quiere Symfony backend con api y interfaz angular/vue - está bien, pero de esta manera estamos perdiendo toda la capacidad de Symfony en la delantera.

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

Algunos consejos para usted:

leen sobre $ interpolateProvider

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

De esta forma puede cambiar {{}} en angular para otra cosa. Estoy usando {[{y}]}, por lo que suele interferir con la ramita

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

Este conectar Symfony enrutamiento con js, por lo que todas sus vistas angulares/o ajax llamadas en js pueden ser generadas por Symfony - esto le da una gran posibilidad

Cuestiones relacionadas