Symfony 3和Angular 2文件夹结构

时间:2016-03-01 11:33:52

标签: php angular symfony

我是Symfony和Angular的新手,我正在尝试弄清楚这些碎片是如何组合在一起的。我想为我的后端和web api使用Symfony。我想使用Angular作为前端桌面体验。

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

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

@Tobias Xy纠正我,如果我错了,但是会在src文件夹中创建bundle并将文件保存在资源文件夹中吗?

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

  

基于前端的应用程序

     

最近,像AngularJS这样的前端技术变得非常漂亮   很受欢迎,用于开发与API通信的前端Web应用程序。

     

如果你正在开发这样的应用程序,你应该使用   这项技术推荐的工具,如Bower和   GruntJS。您应该单独开发前端应用程序   您的Symfony后端(如果需要,甚至可以分离存储库)。

所以他们说要制作两个单独的项目,而不是使用捆绑作为前端?

如果是这样,您如何举办此活动?在两个不同的网站上?

3 个答案:

答案 0 :(得分:7)

Symfony是一个后端框架,因此添加仅包含前端文件(css,javascript等)的包没有意义。

另见Web Assets (Symfony Best Practices)

他们说:

  

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

更新23.03.2016

Cerad在评论中写道:“客户端angularjs和reactjs应用就像Symfony一样拥有自己的构建系统”。 这实际上是一个不同的主题,但我上面链接的文章也说明了一些:

  

最近,像AngularJS这样的前端技术已经变得非常流行,可用于开发与API通信的前端Web应用程序。

     

如果您正在开发这样的应用程序,则应使用该技术推荐的工具,例如Bower和GruntJS。您应该从Symfony后端单独开发前端应用程序(如果需要,甚至可以分离存储库)。

答案 1 :(得分:2)

对于Angular 2,前端构建系统可能存在差异,但结构应类似于我用于Angular 1.x的结构。

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

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

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

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

这将是包含处理后所有资产的文件夹以及不需要处理的任何其他资产,通常是图像,字体等。这将是文件夹结构,将逐字地复制到Web / 3级中的bundle / app文件夹。

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

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

这是您资产的最终公开目的地,以及您在代码中引用它们的路径。它只是第2级src/AppBundle/Resources/Public文件夹的副本。

构建系统

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

在制作中

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

答案 2 :(得分:0)

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

示例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>