【问题标题】:How to integrate Angular with Symfony如何将 Angular 与 Symfony 集成
【发布时间】:2016-01-21 22:13:40
【问题描述】:

所以我的任务是为一个项目构建一个 API 和一个前端。我得到的唯一真正要求是我必须使用 PHP 来构建 API。

我曾经用原始的 PHP 开发过,那是一个两个月的小型个人项目,那是七年前的事了。所以我查看了可用的框架并继续使用 Symfony。

在前端,我希望继续使用 Angular。

我的 API 大部分是构建出来的,但我现在的问题是在 Symfony 进程中提供 angular 文件。似乎对于我需要的每条路径,我都需要在控制器中为该路径编写一个动作,我在很大程度上可以接受。但我刚刚遇到的一个大问题是它总是假设我想要 Twig 作为我的引擎。所以我不能使用 Angular 使用的大括号。

这完全有可能还是我错误地把自己绑在了这个问题上?

编辑:现在我将继续将我的角度包装在逐字标记中

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

【问题讨论】:

    标签: php angular symfony


    【解决方案1】:

    你说:

    似乎对于我需要的每条路径,我都需要在 该路由的控制器

    但 angular2 用于单页应用程序 (SPA),因此您只需要一页即可提供它: 1 个路线 > 1 个动作 > 1 个树枝模板。

    对于此模板,您可以更改开始和结束插值标记: https://docs.angularjs.org/api/ng/provider/$interpolateProvider

    或使用verbatim twig 关键字来为角度插入字符: http://twig.sensiolabs.org/doc/tags/verbatim.html

    但是对于您的 angular2 模板,您不必使用 twig,无需混合两种模板语言。您的 API 将数据提供给 Angular,后者在模板中反映它。

    另外一个好的做法是在 $templateCache 中预编译所有的 Angular 模板,如下所示: https://www.npmjs.com/package/gulp-ng-template

    【讨论】:

    • 路径解释很差。对于每个引用的 .js 文件,我需要为其创建一个路由。现在我只是指向一个 CDN 以使其更容易,但我仍然需要为我的个人 app.js 等创建一个路由。
    • 一个好的做法是使用 Gulp/Grunt 之类的工具将所有 js 文件(以及许多其他东西)连接到一个文件中。您可以将它放在web 文件夹中,这样就可以访问它并且您不需要创建symfony 路由。然后只需添加一个<script src="app.js"></script> 就完成了
    • 事实上,如果 symfony 只是用来提供一个 REST api,你可以完全将你的 Angular 应用程序与它分离。您可以将其放在不同的文件夹甚至其他服务器中。
    【解决方案2】:

    我也曾在 symfony 和 angular2 工作过

    我是怎么开始的

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

    因为 angular2 是前端,它支持 cli。

    symfony 是后端,所以尝试作为服务使用

    我建议你应该使用 symfony2 作为服务

    您可以在哪里添加/编辑/删除和创建前端路由。

    我已经用 symfony2 制作了演示 angular2

    Github 网址

    https://github.com/afeef1915/Angular2

    如果你终于

    将 angular2 与 symfony 集成会面临路由问题 因为 symfony2 无法理解 angular2 路由。

    twig 语法与 angular component.html 文件非常相似

    【讨论】:

      【解决方案3】:

      我更愿意独立开发前端和 API。这就是 API 的意义所在。

      似乎对于我需要的每条路径,我都需要在控制器中为该路径编写一个动作,我在很大程度上可以接受。

      -> 真的更糟。

      对于 twig angular 语法冲突,您可以使用 interpolateProvider 服务更改开始和结束插值标记:

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

      请参阅docs

      【讨论】:

      • 哎呀,这个问题似乎更常见......例如,请参阅here以获得更详细的答案。
      【解决方案4】:

      我们也将大型 Symfony 应用程序的 UI 迁移到 Angular,并决定使用 API 平台 (https://api-platform.com/)。以前,我们使用 FOSRestBundle,但在这个新版本中放弃了它。

      到目前为止,我们对这种方法感到满意。

      您询问了从 Symfony 中提供 Angular 文件的问题。我们选择将它们保存在单独的存储库中,因此它们甚至可以部署在不同的服务器上。这将是我的建议,尽管您当然可以将 Angular 文件放在 /web 目录中。但是,这样做会使部署复杂化。

      【讨论】:

      • 所以我相信这是解决这个问题的“正确”方法,但是对于无法承受“重写”以达到那个水平的大型应用程序,我觉得他们需要被推动临时凑在一起,虽然我知道以后会产生很多re-work,但是没时间re-write总是介绍的东西。我也在考虑使用 Api-Platform。我们有 FOSRest,但使用的并不多。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-03
      • 2021-03-10
      • 1970-01-01
      • 2017-10-21
      • 2019-01-04
      相关资源
      最近更新 更多