Comment intégrer Angular2 avec Symfony

J'ai donc été chargé de créer une API et une interface pour un projet. La seule exigence réelle que j'ai été donnée est que je dois utiliser PHP pour créer l'API.

Je me suis développé en PHP brut une fois, et c'était un petit projet personnel de deux mois, et c'était il y a sept ans. J'ai donc examiné les frameworks disponibles et j'ai poursuivi Symfony.

Sur l'avant-garde, j'avais hâte d'aller de l'avant avec Angular2.

J'ai l'API principalement construit, mais mon problème est maintenant de servir les files angulars dans le process Symfony. Il semble que pour chaque path dont j'ai besoin, j'aurai besoin d'écrire une action dans le controller pour cette route, pour laquelle je suis pour la plupart ok. Mais le gros problème que j'ai rencontré est que c'est toujours en supposant que je voulais Twig comme mon moteur. Je ne suis donc pas en mesure d'utiliser les accolades utilisées par Angular.

Est-ce que cela est possible ou est-ce que je me suis attaché de façon incorrecte?

EDIT: Pour l'instant, je vais aller de l'avant en enveloppant mon angular dans la balise textuelle

{% verbatim %} {{ angular code }} {% endverbatim %} 

Tu as dit :

Il semble que pour chaque path dont j'ai besoin, je devrai écrire une action dans le controller pour cette route

mais angular2 est utilisé pour une application de page unique (SPA), vous n'avez donc besoin que d'une seule page pour la servir: 1 parcours> 1 action> 1 model de brindille.

Pour ce model, vous pouvez modifier les tags d'interpolation de début et de fin: https://docs.angularjs.org/api/ng/provider/ $ interpolateProvider

Ou utiliser le verbatim key de la twig verbatim pour laisser interpoler les caractères angulars: http://twig.sensiolabs.org/doc/tags/verbatim.html

Mais pour vos templates angular2, vous ne devez pas utiliser de brindille, pas besoin de mélanger deux langages de templates. Votre API donne des données angulars qui le reflètent dans les templates internes.

Et une autre bonne pratique est de précomstackr tous vos templates angulars à l'intérieur de $templateCache utilisant des choses comme ça: https://www.npmjs.com/package/gulp-ng-template

Je préférerais développer le frontend et l'API de façon indépendante. Ce serait le point d'une API pour moi.

Il semble que pour chaque path dont j'ai besoin, j'aurai besoin d'écrire une action dans le controller pour cette route, pour laquelle je suis pour la plupart ok.

-> vraiment pire.

Pour le conflit de syntaxe angular de la brindille, vous pouvez modifier les balises d'interpolation de début et de fin à l'aide du service interpolateProvider:

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

voir les documents .

Nous déplaçons également l'interface user d'une grande application Symfony avec Angular et avons décidé d'utiliser la plate-forme API ( https://api-platform.com/ ). Auparavant, nous utilisions FOSRestBundle, mais nous en sums returnnés pour cette nouvelle version.

Jusqu'à présent, nous avons été satisfaits de cette approche.

Vous avez demandé de fournir des files Angulaires à partir de Symfony. Nous avons choisi de les conserver dans un count séparé, de sorte qu'ils pourraient même être déployés sur un server différent. Ce serait ma recommandation, bien que, bien sûr, vous puissiez mettre les files angulars dans le directory / web. Faire cela, cependant, complique le deployment.

J'ai également travaillé en symfony et angular2

Comment ai-je commencé

 don't merge two projects as we can do it for angular 1.4 version. 

car angular2 est un frontend et il supporte cli.

symfony est backend alors essayez d'utiliser comme service

Je suggérerais utiliser Symfony2 comme service

où vous pouvez append / modifier / supprimer et créer un routing frontend.

J'ai fait demo angular2 avec symfony2

Github url

https://github.com/afeef1915/Angular2

si enfin vous

Intégrer angular2 avec symfony alors aurait un problème de routing face car symfony2 ne comprendrait pas le routing angular2.

et la syntaxe de la brindille beaucoup semblable aux files angulars component.html