Mooa 概念


Mooa 框架與 Single-SPA 不一樣的是，Mooa 采用的是 Master-Slave 架構(gòu)，即主-從式設(shè)計(jì)。" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 前端微服務(wù)化：使用微前端框架 Mooa 開發(fā)微前端 Angular 應(yīng)用

前端微服務(wù)化：使用微前端框架 Mooa 開發(fā)微前端 Angular 應(yīng)用

時(shí)間：2022-08-11 17:06:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-11 17:06:01 來源：網(wǎng)站運(yùn)營(yíng)

Mooa 是一個(gè)為 Angular 服務(wù)的微前端框架，它是一個(gè)基于 single-spa，針對(duì) IE 10 及 IFRAME 優(yōu)化的微前端解決方案。




Mooa 概念




Mooa 框架與 Single-SPA 不一樣的是，Mooa 采用的是 Master-Slave 架構(gòu)，即主-從式設(shè)計(jì)。

對(duì)于 Web 頁面來說，它可以同時(shí)存在兩個(gè)到多個(gè)的 Angular 應(yīng)用：其中的一個(gè) Angular 應(yīng)用作為主工程存在，剩下的則是子應(yīng)用模塊。

在這種模式下，則由主工程來控制整個(gè)系統(tǒng)的行為，子應(yīng)用則做出一些對(duì)應(yīng)的響應(yīng)。




微前端主工程創(chuàng)建




要?jiǎng)?chuàng)建微前端框架 Mooa 的主工程，并不需要多少修改，只需要使用 angular-cli 來生成相應(yīng)的應(yīng)用：

ng new hello-world然后添加 mooa 依賴

yarn add mooa接著創(chuàng)建一個(gè)簡(jiǎn)單的配置文件 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 中編寫相應(yīng)的創(chuàng)建應(yīng)用邏輯：

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();}再為應(yīng)用創(chuàng)建一個(gè)對(duì)應(yīng)的路由即可：

{ path: 'app/:appName/:route', component: HomeComponent}接著，我們就可以創(chuàng)建 Mooa 子應(yīng)用。

Mooa 子應(yīng)用創(chuàng)建




Mooa 官方提供了一個(gè)子應(yīng)用的模塊，直接使用該模塊即可：

git clone https://github.com/phodal/mooa-boilerplate然后執(zhí)行：

npm install在安裝完依賴后，會(huì)進(jìn)行項(xiàng)目的初始化設(shè)置，如更改包名等操作。在這里，將我們的應(yīng)用取名為 help。

然后，我們就可以完成子應(yīng)用的構(gòu)建。

接著，執(zhí)行：yarn build 就可以構(gòu)建出我們的應(yīng)用。

將 dist 目錄一下的文件拷貝到主工程的 src/assets/help 目錄下，再啟動(dòng)主工程即可。




導(dǎo)航到特定的子應(yīng)用




在 Mooa 中，有一個(gè)路由接口 mooaPlatform.navigateTo，具體使用情況如下：

mooaPlatform.navigateTo({ appName: 'help', router: 'home'});它將觸發(fā)一個(gè) MOOA_EVENT.ROUTING_NAVIGATE 事件。而在我們調(diào)用 mooa.start() 方法時(shí)，則會(huì)開發(fā)監(jiān)聽對(duì)應(yīng)的事件：

window.addEventListener(MOOA_EVENT.ROUTING_NAVIGATE, function(event: CustomEvent) { if (event.detail) { navigateAppByName(event.detail) }})它將負(fù)責(zé)將應(yīng)用導(dǎo)向新的應(yīng)用。




結(jié)論

最后 Demo 地址見：MooaExamples

源碼（examples 目錄下）：phodal/mooa

關(guān)鍵詞：微服,使用

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉