# Angular+Federation实现可拓展应用架构示例

**Repository Path**: consolelog/demo-ng-federation-001

## Basic Information

- **Project Name**: Angular+Federation实现可拓展应用架构示例
- **Description**: Angular+Federation实现可拓展(插件化)的应用架构示例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://consolelog.gitee.io/demo-ng-federation-001-main
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-05
- **Last Updated**: 2023-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Angular+Federation实现可拓展(插件化)的应用架构示例

主要功能是在运行期间动态加载模块，不需要重新打包部署，这样就可以在第三方开发完插件后集成到系统中，实现插件化的架构。

和前端微应用的概念很相似，不过有一些区别。
比如qiankun这种微应用框架可以跨技术语言(NG和vue)进行系统集成，而federation则更多的关注细微的模块，在angular中表现就是可以单独加载一个NgModule。
二者解决的问题有重合的部分，很多时候可以替换。也可以一起使用，但复杂度会大大提高。

在线地址:https://consolelog.gitee.io/demo-ng-federation-001-main

## 使用技术

主题框架使用：

- Angular 作为基础框架
- Federation 实现插件功能

其它：

- ng-zorro-antd 作为UI组件库
- ngxs 作为状态管理实现，还使用了ngxs提供的form、router、storage插件
- lodash、ngx-auto-unsubscribe-decorator、object-path-immutable 作为常用工具库

## 功能很简单

- app-main(主模块)模块负责插件的集成
  - 插件市场页面中列出了全部插件，目前是用json存储，实际应用中可以保存在后端，也可以提供表单功能来实时维护
  - 已加载插件页面列出当前已经加载的插件，可以选择卸载
- app-shop(商店)模块是一个商城的简单示例
  - 列表页面展示了商城的全部商品，可以随时添加以及删除
  - 列表中可以将商品添加到购物车，顶部显示了当前购物车中已添加商品的数量
  - 购物车页面展示了已添加到购物车的全部商品，可以调整商品数量，顶部显示了总金额
  - 购物车有下单功能(就是模拟付款)，此时会发送一条下单消息，如果没有加载物流插件则会没有效果，否则会继续流程
- app-logistics(物流)模块是一个物流快递系统的简单示例
  - 在商城购物车执行下单功能后，会跳转到物流模块的订单信息页面，此时除了展示订单详情，还会发送一条回调消息，商店模块接收到会清空购物车
  - 订单信息页面展示了当前订单的详情，包括下单时间、订单总价、商品详情以及物流状态
  - 订单列表页面展示了全部订单，可以对其进行物流状态的修改，比如出库、到货