Angular 2 模块/应用程序结构

Posted 2023-02-23

【中文标题】Angular 2 模块/应用程序结构

【英文标题】：Angular 2 Module / Application Structure

【发布时间】：2016-07-29 17:00:39

【问题描述】：

我只是在评估如何将 Angular 2 用于一些共享一些服务和组件的 Web 应用程序。据我了解，我可以创建组件库来共享组件。每个组件可能有它自己的 css，它只影响组件。共享服务的最佳方法是什么？

我目前正在使用 Angular 1 和引导组件。一个要求是，我们的应用程序应该提供为其创建自定义皮肤的可能性。通过添加 java 脚本 sn-p，应用程序本身应该可以在每个网站上运行。这与仅在一个特定网站上运行的其他 SPA 有很大不同。目前我们提供了一个无引导变量文件，可以自定义上传以通过更少的新皮肤创建。这样做的好处是，几乎每个网页设计师都知道引导程序是如何工作的。但这也意味着 css 是全局定义的，而不是在组件内部。以非常简单的方式为人们提供在 angular 2 中自定义 css 的最佳方法是什么？

在我们的例子中，可能需要两个应用程序相互交互。例如，假设您有一个酒店预订应用程序和一个航班预订应用程序。在用户预订航班后，您可能还想在同一页面中提供酒店预订应用程序。两个应用程序可能共享日期范围选择表单或结果页面等组件。谈论不同的应用程序是否正确，还是我只创建两个模块（酒店+航班）？延迟加载如何仅加载当前应用程序所需的部分以减少大型项目的初始加载时间？

有什么想法对于这类项目来说最好的结构是什么？

【参考方案1】：

我可以想象它的方式。

具有两条主要路线的应用程序

/Flights
|--Holds other routes for the Flights part of the application
|i.e. 
/Flights/flights
/Flights/seating
/Flights/payment

/Hotels
|--Holds other routes for the Hotels part of the application
|i.e. 
/Hotels/booking
/Hotels/payment

因此，它将是一个具有两条主要路由的应用程序，这些路由嵌套了满足其特定需求的路由。