Symfony 3 和 Angular 2 文件夹结构答案

【问题标题】：Symfony 3 and Angular 2 Folder StructureSymfony 3 和 Angular 2 文件夹结构
【发布时间】：2016-03-01 11:33:51
【问题描述】：

我是 Symfony 和 Angular 的新手，我正在尝试弄清楚这些部分如何组合在一起。我想为我的后端和 web api 使用 Symfony。我想将 Angular 用于类似前端桌面的体验。

我不确定文件夹结构应该如何。我是否将我的 angular javascript/typescript 文件放在 Symfony 项目根目录的文件夹中并利用它们的文件夹结构。或者我的 src 文件夹中有两个包。一个用于后端/网站。另一个用于前端？或者后端应该提供插入了角度组件的树枝模板？

***** 编辑 *****

@Tobias Xy 如果我错了，请纠正我，但这会在 src 文件夹中创建包并将文件保存在资源文件夹中是否正确？

然后我在底部看到以下内容：

基于前端的应用程序

最近，像 AngularJS 这样的前端技术变得很漂亮用于开发与 API 对话的前端 Web 应用程序。

如果您正在开发这样的应用程序，您应该使用技术推荐的工具，例如 Bower 和咕噜声。您应该单独开发您的前端应用程序您的 Symfony 后端（如果您愿意，甚至可以分离存储库）。

所以他们是说做两个单独的项目而不是在前端使用捆绑包？

如果是这样，你如何主持这个？在两个不同的网站上？

【问题讨论】：

我想他是说你应该有 2 个项目。一个，如您所说，使用 Symfony，用于 API、服务器端和另一个项目，带有角度、前端。

标签： php angular symfony

【解决方案1】：

Symfony 是一个后端框架，因此添加仅包含前端文件（css、javascript 等）的包是没有意义的。

另见Web Assets (Symfony Best Practices)

他们说：

将您的资产存储在 web/ 目录中。

23.03.2016 更新

Cerad 在 cmets 中写道：“客户端 angularjs 和 reactjs 应用程序有自己的构建系统，就像 Symfony 一样”。这实际上是一个不同的主题，但我上面链接的文章也谈到了这一点：

最近，AngularJS 等前端技术在开发与 API 对话的前端 Web 应用程序方面变得非常流行。

如果您正在开发这样的应用程序，您应该使用技术推荐的工具，例如 Bower 和 GruntJS。您应该将前端应用程序与 Symfony 后端分开开发（如果您愿意，甚至可以将存储库分开）。

【讨论】：

虽然 Symfony 2 确实是一个后端框架，但它通常用于构建 Web 应用程序。我没有一种适合所有目录结构的尺寸，但通常会有一个用于客户端程序的 src-client 目录。
当然是用来构建web应用的。你还会用它做什么？我在这里想说的是，Symfony 专注于您网站的服务器端（即后端）部分。在我看来，他们的解释为什么你应该放在 web 目录中是完全有道理的，但显然你可以把你的资产放在你想要的任何地方，因为把它放在 web 目录中“只是”一种最佳实践。
我的意思是客户端的 angularjs 和 reactjs 应用程序有自己的构建系统，就像 Symfony 一样。最终的资产确实最终会在 web 下，但实际的源代码几乎肯定会在其他地方。但我认为我们离题了。

【解决方案2】：

对于 Angular 2，前端构建系统可能有所不同，但结构应该与我用于 Angular 1.x 的结构相似。

我用来将前端资产放置在我们可以描述为三级流程的文件夹结构中。我们这里只列举三个层次：

1 级 - src/AppBundle/Resources/Private 文件夹

在这个文件夹中，我放置了需要任何类型处理的所有前端资源，例如 transpile、autoprefix、uglify 等。对于您选择的大多数 JS、SCSS、LESS 或 HTML 文件都是如此。您可以定义您喜欢的文件夹结构。

第 2 级 - src/AppBundle/Resources/Public 文件夹

这将是包含处理后的所有资产以及任何其他不需要处理的资产（通常是图像、字体等）的文件夹。这将是从字面上复制到网络的文件夹结构/级别 3 中的 bundles/app 文件夹。

注意：这个级别确实是多余的，可以谨慎跳过。就我而言，我保留它是为了避免 Symfony 默认安装资产的方式发生“意外”，这将用这个内容替换您的 web/bundles/app 文件夹。如果您使用任何其他以这种方式安装资产的捆绑软件，例如FOSJsRoutingBundle，就会出现这种情况。

第 3 级 - web/bundles/app 文件夹

这是您的资产的最终公共目的地，也是您在代码中引用它们的路径。它只是第 2 层的 src/AppBundle/Resources/Public 文件夹的副本。

构建系统

您将需要一个前端构建系统来转译您的文件并将它们复制到 2 级和 3 级的相应文件夹中。在我的 Angular 1.x 案例中，我使用 Gulp 和 Node.js。这意味着您的项目中将拥有 gulpfile.js 文件、package.json 文件和 node_modules 文件夹。我不在乎，它工作得很好。请记住不要将 node_modules 文件夹添加到您的存储库中。

生产中

除非出于某种原因您确实需要在生产环境中重建，否则您可以跳过级别 1、级别 2 和 gulp 相关的文件夹和文件，例如 node_modules、gulpfile.js 等。

【讨论】：

【解决方案3】：

您可以将客户端创建为根文档，将服务器端创建为别名位置，但请注意不要覆盖别名。或者您可以更改主机。

示例 1：

[client]   www.example.com/<client_root_dir>
[server]   www.example.com/api/<server_root_dir>

或示例 2：

[client]   www.example.com/<client_root_dir>
[server]   api.example.com/<server_root_dir>

【讨论】：