如何最好地设计我的 Angular2+ 产品组合基础架构



我一直在创建一个投资组合网站,但不知道如何最好地设计我的主页的基础设施以及示例项目。

我正在将 Angular 用于我的 3 个示例项目,但不确定将代码放在哪里。

这些项目只不过是为招聘经理或招聘人员查看/使用的作品集而构建的。

我的问题是将我的项目应用程序的代码与我的主页放在何处。


方法#1:单个应用程序

最好将它们作为文件夹放在单个角度应用程序和后端中吗?例如,我的 Angular 代码的结构如下:

  • 来源
    • .app
      • 主页页面文件夹
      • 项目1文件夹
        • 项目1服务
        • 项目1组件
      • 项目2文件夹
      • 项目3文件夹
      • app.component.ts
      • .app。。。。。。等

使用此方法的示例网址:mysite.com/project1


方法#2:单独的应用程序

还是最好将它们分开为三个独立的 Angular 应用程序,并具有三个单独的后端?

然后我可以将它们部署为子域。例如:project1.mysite.com


我认为管理多合一方法比尝试展示卓越的 IT 托管技能会更容易,但我有兴趣在这里学习我的案例的最佳实践。

感谢您的帮助!让我知道是否有任何方法可以澄清这个问题。

工作区结构

最佳做法是将单个工作区与多个项目一起使用。

单项目工作区

通常,当您第一次开始使用 Angular 并使用ng newCLI 命令创建新项目时(例如ng new my-app),您最终会得到一个仅支持一个项目的工作区,以及如下所示的结构:

- src
- app
- app.component.ts
- ...
- ...
- angular.json
- package.json
- ...

。其中app是默认(也是唯一的)项目。

多项目工作区

相反,您需要做的是创建一个空工作区,然后逐个添加每个项目(根据需要)。

new new my-workspace --createApplication="false"

这将创建一个没有任何项目的空白 Angular 工作区。

启动新项目时,使用工作区文件夹中的以下命令将它们添加到工作区:

new generate application first-app

这为您提供了如下结构:

- my-workspace
- ...
- projects
- first-app
- second-app
- angular.json
- ...

然后,每个项目/应用程序都有一个这样的结构:

- src
- app
- assets
- ...
- e2e
- ...

有关最佳实践,请参阅此页面:https://angular.io/guide/file-structure#multiple-projects

好客

在托管方面,您提到的布局并没有真正映射到您最终托管项目的方式(即子文件夹与子域)。您不会上传整个项目工作区,就好像它是服务器端(例如.PHP/JSP)应用程序一样。

由于 Angular 应用程序是 SPA(单页应用程序),因此在一天结束时,您可以构建应用程序并将静态文件上传到服务器。在那里,您可以选择从子文件夹或子域提供这些静态文件。

最新更新