Silex + Angular JS 2 项目结构

Question

我已经使用 Angular 2 构建了一个小应用程序，它可以很好地与 REST API 配合使用。但是，现在我想将后端和前端包含在一个项目中。

目前，我正在查看Silex 并希望构建一个以 Angular 2 作为前端，以 Silex 作为提供 API 的后端的应用程序。

在我的 Angular js 应用程序中，我有 3 个不同的选项卡，它们与 3 个不同的服务通信。我的 Angular 应用程序组织如下：

Dashboard app
|
+---app
|    |
|     +--components
|     |        |
|     |        \-comp1
|     |           \-html
|     |            \-js
|     |            \-css
|     +--config
|     +--mock
|     +--services
+---package.json
+---index.html
+---node_modules

我只是对如何组织包括 angular 2 和 Silex 的项目结构感到困惑。

Answer 1

您应该将它们捆绑在一起还是分开放置？

Angular 2 和 Silex 是 2 个独立的组件，而且，我认为您将它们保留为 2 个独立的项目，如果您显然没有非常充分的理由的话。 我建议将它们分开，因为：

• Angular 应用程序可能是一个 SPA
• Angular App 会从后端服务获取数据，不管后端是 PHP、Rails 还是 NodeJs

人们可能会争论将后端和前端分开或反之亦然的利弊，但这完全取决于您。 有一些关于这方面的好文章，您可能想看看以帮助您做出决定：

• The case for separating front- and back-end
• Let's keep frontend outside of Ruby
• Separating Angularjs and Rails apps as standalone components

让他们在一起

如果你想在一起，你可以遵循 Yeoman Mean 生成器使用的结构，也可以是 node js MVC 框架。 这里的想法是有 2 个独立的代码区域：

• 可公开访问的前端
• 受限后端

如果您使用过 Cake 或任何类似的框架，您会注意到它们具有这种结构。 public/ 是公开暴露的目录，其余的一切都在公共区域之外。

从 cake 或 mean js 项目中获取一些线索，您可以创建以下结构：

index.php
src/              Your PHP App outside publically accessible public directory 
  classes/

public/             --> all of the files to be used in on the client side | Your Angular App Structure
  css/              --> css files
    app.css         --> default stylesheet
  img/              --> image files
  app/               --> javascript files
    app.js          --> declare top-level app module
    user/
      users.controller.js
      users.service.js
      users.html
    group/
      groups.controller.js
      groups.services.js
      groups.specs.js
      groups.html
    core/
      services/
        network/
          network.service.js
        db/
          databvase.service.js
        http/
          http.service.js
      services.export.js        
      components/
          directives.js   --> custom angular directives
          filters.js      --> custom angular filters

    lib/            --> angular and 3rd party JavaScript libraries
      angular/
        angular.js            --> the latest angular js
        angular.min.js        --> the latest minified angular js
        angular-*.js          --> angular add-on modules
        version.txt           --> version number

我的 Angular 应用程序遵循 按功能文件夹 结构，这确实可以帮助您以更易于管理的层次结构组织应用程序，请查看 John Papa - Angular App Structuring Guidelines

希望这会有所帮助:)