继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

前端微服务化:使用微前端框架 Mooa 开发微前端应用

phodal
关注TA
已关注
手记 60
粉丝 113
获赞 1769

Mooa 是一个为 Angular 服务的微前端框架,它是一个基于 single-spa,针对 IE 10 及 IFRAME 优化的微前端解决方案。

Mooa 概念

Mooa 框架与 Single-SPA 不一样的是,Mooa 采用的是 Master-Slave 架构,即主-从式设计。

对于 Web 页面来说,它可以同时存在两个到多个的 Angular 应用:其中的一个 Angular 应用作为主工程存在,剩下的则是子应用模块。

  • 主工程,负责加载其它应用,及用户权限管理等核心控制功能。

  • 子应用,负责不同模块的具体业务代码。

在这种模式下,则由主工程来控制整个系统的行为,子应用则做出一些对应的响应。

微前端主工程创建

要创建微前端框架 Mooa 的主工程,并不需要多少修改,只需要使用 angular-cli 来生成相应的应用:

ng new hello-world

然后添加 mooa 依赖

yarn add mooa

接着创建一个简单的配置文件 apps.json,放在 assets 目录下:

[{
    "name": "help",
    "selector": "app-help",
    "baseScriptUrl": "/assets/help",
    "styles": [
      "styles.bundle.css"
    ],
    "prefix": "help",
    "scripts": [
      "inline.bundle.js",
      "polyfills.bundle.js",
      "main.bundle.js"
    ]
  }
]]

接着,在我们的 app.component.ts 中编写相应的创建应用逻辑:

mooa = new Mooa({  mode: 'iframe',  debug: false,  parentElement: 'app-home',  urlPrefix: 'app',  switchMode: 'coexist',  preload: true,  includeZone: true});

constructor(private renderer: Renderer2, http: HttpClient, private router: Router) {
  http.get<IAppOption[]>('/assets/apps.json')
    .subscribe(
      data => {        this.createApps(data);
      },
      err => console.log(err)
    );
}

private createApps(data: IAppOption[]) {
  data.map((config) => {    this.mooa.registerApplication(config.name, config, mooaRouter.hashPrefix(config.prefix));
  });  const that = this;  this.router.events.subscribe((event) => {    if (event instanceof NavigationEnd) {
      that.mooa.reRouter(event);
    }
  });  return mooa.start();
}

再为应用创建一个对应的路由即可:

{  path: 'app/:appName/:route',
  component: HomeComponent}

接着,我们就可以创建 Mooa 子应用。

Mooa 子应用创建

Mooa 官方提供了一个子应用的模块,直接使用该模块即可:

git clone https://github.com/phodal/mooa-boilerplate

然后执行:

npm install

在安装完依赖后,会进行项目的初始化设置,如更改包名等操作。在这里,将我们的应用取名为 help。

然后,我们就可以完成子应用的构建。

接着,执行:yarn build 就可以构建出我们的应用。

将 dist 目录一下的文件拷贝到主工程的 src/assets/help 目录下,再启动主工程即可。

导航到特定的子应用

在 Mooa 中,有一个路由接口 mooaPlatform.navigateTo,具体使用情况如下:

mooaPlatform.navigateTo({  appName: 'help',
  router: 'home'});

它将触发一个 MOOA_EVENT.ROUTING_NAVIGATE 事件。而在我们调用 mooa.start() 方法时,则会开发监听对应的事件:

window.addEventListener(MOOA_EVENT.ROUTING_NAVIGATE, function(event: CustomEvent) {  if (event.detail) {
    navigateAppByName(event.detail)
  }
})

它将负责将应用导向新的应用。

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP