Question

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

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

在我的Angular js app中，我有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是两个独立的组件，而且，我认为你将它们作为两个独立的项目，如果显然你没有非常强大的理由。我建议将它们分开，因为：

Angular App可能是SPA
Angular App将从后端服务获取数据，如果后端是PHP，Rails或NodeJs则无关紧要

人们可能会争论保持后端和前端分离的优缺点，反之亦然，但是，它真的取决于你。有一些很好的文章，你可能希望看看，以帮助你决定：

让他们在一起

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

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

如果您使用过Cake或任何类似的框架，您会发现它们具有这种结构。 public / 是公开公开的目录，其余部分都在公共区域之外。

从蛋糕或平均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 Apps遵循逐个功能结构，这确实可以帮助您在更易于管理的层次结构中整理应用，看看John Papa - Angular App Structuring Guidelines

希望这会有所帮助：）

Silex + Angular JS 2项目结构

1 个答案: